使用类名选择最后一个元素

这似乎应该很简单 – 但我无法弄明白。

 1 2 3 4 4 4 5   6 7 8 8 8 10  

我想在每个

使用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，否则不添加任何内容。

Answer 1

您可以在每个tr找到.data-column ，然后使用:first和:last DEMO

 $('tr').each(function() { $(this).find('.data-column:first, .data-column:last').css('color', 'red') }) 

Answer 2

使用each()遍历所有tr并在其中找到第一个和最后一个.data-column ，然后将css应用于它们。

 $('tr').each(function () { var first = $('.data-column:first', this); var last = $('.data-column:last', this); first.css('padding-right', '10px'); last.css('padding-left', '10px'); }) 

  
 
 
1
 
2
 
3
 
4
 
5
 
 
 
6
 
7
 
8
 
9
 
10