这看起来应该很简单 – 但我无法弄明白.
<tr>
<td class="data-command">1</td>
<td class="data-column data-column-text">2</td>
<td class="data-column data-column-text">3</td>
<td class="data-column data-column-numeric">4</td>
<td class="data-column data-column-date">4</td>
<td class="data-column data-column-numeric">4</td>
<td class="data-command">5</td>
</tr>
<tr>
<td class="data-column data-column-numeric">6</td>
<td class="data-column data-column-text">7</td>
<td class="data-column data-column-text">8</td>
<td class="data-column data-column-text">8</td>
<td class="data-column data-column-date">8</td>
<td class="data-command">10</td>
</tr>
我想在第一个和最后一个< td>中添加填充.在每个< tr>中使用class data-column(因此在上面的示例中,将选择具有2,4,6和9的列).
起初,我尝试使用：last-of-type和：first-of-type CSS selector：
.data-command:first-of-type { padding-right: 10px; }
.data-command:last-of-type { padding-left: 10px; }
但是,这不起作用,因为last-of-type不能与类一起使用.
还有另一种方法来实现这一目标吗？我尝试使用jQuery,但我无法得到任何工作……
更新
我遗漏了另一块拼图.所以我添加到第一列和最后一列的填充类型依赖于另一个类.
如果最后一个.data-column是.data-column-text或.data-column-date,则添加padding-right,否则,不要添加任何填充.
如果第一个.data-column是.data-column-numeric,则添加padding-left,否则不添加任何内容.
解决方法
你可以在每个tr中找到.data-column,然后使用：first和：last
DEMO
$('tr').each(function() {
$(this).find('.data-column:first,.data-column:last').css('color','red')
})
回答更新
在这种情况下,您可以使用hasClass()检查类
$('tr').each(function() {
var first = $(this).find('.data-column:first');
var last = $(this).find('.data-column:last')
if (last.hasClass('data-column-text') || last.hasClass('data-column-date')) last.css('color','red');
if (first.hasClass('data-column-numeric')) first.css('color','red');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="data-command">1</td>
<td class="data-column data-column-text">2</td>
<td class="data-column data-column-text">3</td>
<td class="data-column data-column-numeric">4</td>
<td class="data-column data-column-date">4</td>
<td class="data-column data-column-numeric">4</td>
<td class="data-command">5</td>
</tr>
<tr>
<td class="data-column data-column-numeric">6</td>
<td class="data-column data-column-text">7</td>
<td class="data-column data-column-text">8</td>
<td class="data-column data-column-text">8</td>
<td class="data-column data-column-date">8</td>
<td class="data-command">10</td>
</tr>
</table>
