如何获得第n个jQuery元素


311

在jQuery中,$("...").get(3)返回第三个DOM元素。返回第三个jQuery元素的功能是什么?

Answers:


310

为什么不先浏览(简短)选择器页面?

它是::eq()运算符。就像一样使用它get(),但是它返回jQuery对象。

或者您也可以使用.eq()功能。


23
这难道不是应该.eq()的,而不是:eq()
RubenGeert 2014年

15
是的,.eq()更适合OP的问题。:eq()在的字符串参数中使用$,而是.eq()现有jQuery对象上的方法。
mjswensen 2014年

55
我发誓,我必须去看看这件事的每个单身时间
ivarni 2014年

3
@JoelWorsham取决于所需的行为。$('select').find('option').eq(n)基本上将忽略分组,并整体获得所有选项。如果您希望每个组都这样,则必须执行以下操作:$('select').find('optgroup').each(function() { $(this).find('option').eq(n)...; })
Dykam 2015年

4
“为什么不先浏览(短)选择器页面?” -因为“ eq”是一个非常糟糕的名字,我经常跳过它,因为eq对我来说意味着比较....
mmlac

309

您可以使用:eq选择器,例如:

$("td:eq(2)").css("color", "red"); // gets the third td element

eq(int)函数:

$("td").eq(2).css("color", "red");

另外,请记住索引是从零开始的。


7
作为同义词,您也可以使用:nth()选择器–不要与:nth-child()
user123444555621

更好的答案,但事实发生3年后未编辑:)
安德鲁(Andrew)

感谢您的实际解释如何使用选择器/功能
约瑟夫·罗杰斯

49

如果您可以控制构建jQuery对象的查询,请使用 :eq()

$("div:eq(2)")

如果您无法控制它(例如,它是从另一个函数或其他东西传递过来的),请使用 .eq()

var $thirdElement = $jqObj.eq(2);

或者,如果您想要其中的一部分(例如,第三,第四和第五个元素),请使用 .slice()

var $third4th5thElements = $jqObj.slice(2, 5);

正在寻找切片,但不确定如何搜索。感谢您超出原始问题的要求。
Samik R

4
对于那些迷失这个答案的人,需要注意的一个有用点是,第n个子选择器基于1,而:eq或.eq()基于0
Sudhanshu Mishra 2013年

1
您应该使用.eq()而不是:eq()实际使用。性能略有提升。
2014年

13

我想你可以用这个

$("ul li:nth-child(2)").append("<span> - 2nd!</span>");

它在每个匹配的ul中找到第二个li,并对其进行注释。


11

.eq()-一个整数,指示元素从0开始的位置。

例如:

考虑一个带有简单列表的页面:

<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
</ul>

我们可以将此方法应用于列表项集:

$( "li" ).eq( 2 ).css( "background-color", "red" );

有关更多信息:.eq()


3

如果已经在变量中包含jquery对象,则也可以将其视为普通索引数组,而无需使用jquery:

var all_rows = $("tr");
for(var i=0; i < all_rows.length; i++){
   var row = all_rows[i];
   //additionally, you can use it again in a jquery selector
   $(row).css("background-color","black");
}

尽管上面的示例在任何方面都没有用,但是它代表了如何将jquery创建的对象视为索引数组。


正确,还有一个提示(很有用)提示:如果该行包含<select>元素列表,并且您想要选定的组合框元素,请使用$(row).val();
Matt

2

如果我正确理解了您的问题,则始终可以像这样包装get函数:

var $someJqueryEl = $($('.myJqueryEls').get(3));

3
这只是“艰难的方式”,这是eq()免费提供给您的。
Caumons

1

如果您想获取特定的元素/节点或循环标记,例如

<p class="weekday" data-today="monday">Monday</p>
<p class="weekday" data-today="tuesday">Tuesday</p>
<p class="weekday" data-today="wednesday">Wednesday</p>
<p class="weekday" data-today="thursday">Thursday</p>

因此,从上面的代码循环开始执行,我们要选择特定的字段,因此我们必须使用jQuery选择,该选择只能从上面的循环中选择期望的元素,因此代码将是

$('.weekdays:eq(n)');

例如

$('.weekdays:eq(0)');

以及其他方法

$('.weekday').find('p').first('.weekdays').next()/last()/prev();

但是第一种方法在以下情况下效率更高 HTML <tag>具有唯一的类名。

注意:当在目标元素或节点中它们不是类名时,将使用第二种方法。

有关更多信息,请访问https://api.jquery.com/eq/


0

对于使用选择器的迭代似乎没有任何意义:

var some = $( '...' );

for( i = some.length -1; i>=0; --i )
{
   // Have to transform in a jquery object again:
   //
   var item = $( some[ i ] );

   // use item at will
   // ...
}

0

在线示例,使用jQuery访问和删除第N个元素:

<html>
<head></head>
<body>
    <script type="text/javascript" 
    src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        $('li:eq(1)').hide();
      });
    </script>
    <ol>
      <li>First</li>
      <li>Second</li>
      <li>Third</li>
    </ol>
</body>
</html>

运行时,顺序列表中将显示两个项目:第一和第三。第二个被隐藏了。


PS:计数从0开始;首先是索引0,其次是索引1,依此类推....
KNU

0
 $(function(){
            $(document).find('div').siblings().each(function(){
                var obj = $(this);
                obj.find('div').each(function(){
                    var obj1 = $(this);
                    if(!obj1.children().length > 0){
                        alert(obj1.html());
                    }
                });

            });
        });

<div id="2">
    <div>
        <div>
            <div>XYZ Pvt. Ltd.</div>
        </div>
    </div>
</div>
<div id="3">
    <div>
        <div>
            <div>ABC Pvt Ltd.</div>
        </div>
    </div>
</div>

“ $(function(){”)是秋天,我创建了一个自动触发的匿名函数。在里面,我发现了三个同级兄弟父div,然后在所有三个父div中进行了迭代,并检查了每个子级的长度。我如何识别上一个div是否为上一个div现在,我提醒每3个主要上个div的最后一个div html
Sanjay Verma

您可以编辑答案,而不必在评论中提供信息:)
T3 H40
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.