javascript - 我如何使用 :nth-child() selector starting from the last element, 而不是第一个？

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() 这样的非标准选择器只会给你整个集合中的倒数第二个元素。