在jQuery中选择第N个前一个兄弟节点？

Question

我正在尝试设置我的jQuery选择器，但我不确定我需要如何编写它。

我有一个无序列表，看起来像这样:

<ul>
    <li>something</li>
    <li>something</li>
    <li>something</li>
    <li>something</li>
    <li class="last">something</li>
</ul>

现在我知道如果我想选择最后一个子元素，我可以使用"ul li.last"或"ul.li:last"，但是如果我想选择倒数第二个、第三个或第20个呢？现在该怎么做呢？

- dougoftheabaci

Answer 1

您使用 eq：

$('ul li').eq(X);

X是一个基于0的索引，用来表示你想要选择的元素。你也可以使用选择器形式：

$('ul li:eq(X)');

使用 nth-child 选择器也能够达到类似的效果：

$('ul li:nth-child(X)');

文档中对于nth-child和eq之间的区别有以下解释:

:eq(index)只匹配一个元素，而:nth-child()匹配多个元素：每个父元素都匹配到一个索引值。每个父元素匹配到多个偶数、奇数或等差数列。指定的索引是从1开始计数的，与从0开始计算的:eq()不同。

因此，通过执行$('ul li').eq(19);，你将获得查询结果中第20个匹配元素（如果文档中有多个列表，则不会获取“所有第19个子元素”，而$('ul li:nth-child(20)');将获取文档中每个<ul>的第20个匹配列表元素。 编辑：

要做类似“倒数第二”的操作，可以使用如下方法：

var $ul = $('#mylist > li');
var $el = $ul.eq($ul.length-2);

但是你应该检查一下确保长度减2不小于0。

- Paolo Bergantino

Answer 2

你想要倒数第三个吗？

var $ul = $("ul li");
$ul.find(":eq(" + Math.max(0, $ul.length - 3) + ")");

简单解释：$ul的长度（它是一个jQuery对象）代表li元素的数量，因此您可以与":eq(n)"选择器一起使用，以获取所需索引处的li元素。

我使用了Math.max，以防列表太短（少于3个li元素）。

这种方法也可以工作，但显然不是最好的方法：

var $ul = $("ul li:last").prev().prev();

- Jeff Meatball Yang

Answer 3

alert($('ul li').eq(3).text());

这将会提醒第三个列表项的文本。

- karim79

Answer 4

jQuery团队在1.9版本中添加了此功能。

您可以在http://api.jquery.com/nth-last-child-selector/阅读相关信息。

- Magnus

Answer 5

对于第三个和第二十个，您可以使用 ul li:eq(3) 和 ul li:eq(20)。对于倒数第二个，您可能可以使用 nth-child 的 equation 参数选项来实现，但我不确定。

- chaos