jQuery 在jQuery中选择第N个前一个兄弟?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/1022595/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 10:25:40  来源:igfitidea点击:

Select Nth previous sibling in jQuery?

jqueryhtmlcss-selectors

提问by Paolo Bergantino

I'm trying to set up my jQuery selector but I'm not exactly sure how I need to write it.

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

I've got a unordered list that looks something like this:

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

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

Now I know if I want to select the last child I can do that by using either "ul li.last" or "ul.li:last" but say if I wanted the second from last, or third, or 20th? Now would I do that?

现在我知道如果我想选择最后一个孩子,我可以使用“ul li.last”或“ul.li:last”来做到这一点,但是说我是否想要倒数第二个,第三个,还是第 20 个?现在我会这样做吗?

回答by Paolo Bergantino

You use eq:

你使用eq

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

Where X is a 0-based index of which element you want. You could also use the selector form:

其中 X 是您想要的元素的基于 0 的索引。您还可以使用选择器形式

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

And you could also achieve a similar result by using nth-child:

你也可以通过使用来获得类似的结果nth-child

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

The documentation has this to say about the difference between nth-childand eq:

该文件有这样说的区别nth-childeq

While :eq(index) matches only a single element, this matches more than one: One for each parent with index. Multiple for each parent with even, odd, or equation. The specified index is one-indexed, in contrast to :eq() which starts at zero.

虽然 :eq(index) 仅匹配一个元素,但它匹配多个元素:每个具有索引的父元素一个。每个具有偶数、奇数或等式的父级的倍数。与从零开始的 :eq() 相比,指定的索引是一索引的。

So by doing $('ul li').eq(19);you would get the single 20th matched element of the query (so if there is more than one list in the document this won't get you "all 19th children", while $('ul li:nth-child(20)');would get you the individual 20th matched list element of each <ul>in the document.

因此,通过这样做,$('ul li').eq(19);您将获得查询的第 20 个匹配元素(因此,如果文档中有多个列表,则不会获得“所有第 19 个孩子”,而$('ul li:nth-child(20)');将获得每个第 20 个匹配的列表元素<ul>在文件中。

EDIT:

编辑

To do something like "second to last", the sane way to do it would be like:

要执行诸如“倒数第二”之类的操作,明智的做法是:

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

But you should probably do a check to make sure length-2 is not less than 0.

但是您可能应该进行检查以确保长度 2 不小于 0。

回答by Jeff Meatball Yang

Do you want the 3rd from last?

你想要倒数第三个吗?

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

Quick explanation: The length of $ul (which is a jQuery object) is how many li's are found. So you can use that along with the ":eq(n)" selector to get the li at the desired index.

快速解释:$ul(它是一个 jQuery 对象)的长度是找到了多少个 li。因此,您可以将它与 ":eq(n)" 选择器一起使用以获取所需索引处的 li。

I used Math.max in case the list was too short (less than 3 li's).

我使用 Math.max 以防列表太短(少于 3 里)。

This will also work, but it's obviously not the best way:

这也可以,但显然不是最好的方法:

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

回答by Magnus

The jQuery team added this feature in version 1.9

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

You can read about it at http://api.jquery.com/nth-last-child-selector/

你可以在http://api.jquery.com/nth-last-child-selector/阅读它

回答by chaos

For third and twentieth, you can do ul li:eq(3)and ul li:eq(20). For second to last, you might be able to do something with nth-child's equationargument option, though I'm not sure.

对于第三个和第二十个,您可以执行ul li:eq(3)ul li:eq(20)。倒数第二,您也许可以使用nth-child's equationargument 选项做一些事情,尽管我不确定。

回答by karim79

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

That will alert the text of the third list item.

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