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

Question

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我想通过这种方式得到元素<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。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

如果有多个ul元素，这也会有效。像jQuery＆＃39; .eq()这样的非标准选择器只会提供整个集合中倒数第二个元素。

Answer 2

尝试使用:nth-last-child()选择器。它从最后一个孩子开始计算，从最后一个孩子开始计算。

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