这看起来应该很简单 – 但我无法弄明白.
@H_502_2@<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：
@H_502_2@.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
@H_502_2@$('tr').each(function() {
$(this).find('.data-column:first,.data-column:last').css('color','red')
})
回答更新
在这种情况下,您可以使用hasClass()检查类
