我如何从最后一个元素而不是第一个元素开始使用：nth-​​child（）选择器？

Question

 $('button').click(function(){ $('ul').find('li:nth-child(2)').css('color', '#f00') }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li>Glen</li> <li>Tane</li> <li>Ralph</li> <li>David</li> </ul> <button>Draw it</button> 

我想通过这种方式获取元素<li>Ralph</li> ：提供负数表示从集合的末尾开始的位置，就像.eq(-2) ：

$('ul').find('li:nth-child(-2)').css('color', '#f00')

可能吗？ 如果没有，有没有办法重写nth-child() function ？

Answer 1

使用:nth-last-child(2) 。

这是符合标准的选择器，因此它也可以与.querySelectorAll和CSS中的文件一起使用。

 $('ul').find('li:nth-last-child(2)').css('color', '#f00') 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li>Glen</li> <li>Tane</li> <li>Ralph</li> <li>David</li> </ul> <button>Draw it</button> 

如果有多个ul元素，这也将起作用。 诸如jQuery的.eq()类的非标准选择器只会为您提供整个集合中倒数第二个元素。

Answer 2

尝试:nth-last-child()选择器。 它从最后一个孩子开始计数，从1开始直到最后一个孩子。

$('button').click(function(){
  $('ul').find('li:nth-last-child(2)').css('color', '#f00')
});