如何获取第n个jQuery元素

Question

如何获取第n个jQuery元素

jquery

366

在jQuery中，$("...").get(3)返回第3个DOM元素。那么返回第3个jQuery元素的函数是什么？

- Sam Lee

11个回答

336

为什么不先浏览（简短的）选择器页面呢？

这就是 :eq() 运算符。它的用法与 get() 类似，但它返回的是 jQuery 对象。

或者你也可以使用 .eq() 函数。

- Dykam

23

应该使用.eq()而不是:eq()，对吗？ - RubenGeert

15

是的，.eq() 更适合此问题。:eq() 用于 $ 中的字符串参数，而 .eq() 是现有 jQuery 对象的方法。 - mjswensen

60

我发誓每次都必须去查这个东西。 - ivarni

3

取决于想要的行为。 $('select').find('option').eq(n) 基本上会忽略分组，把所有选项作为一个整体获取。如果你想对每个分组进行操作，就需要用类似这样的代码：$('select').find('optgroup').each(function() { $(this).find('option').eq(n)...; })。 - Dykam

7

为什么不先浏览（简短的）选择器页面呢？- 因为“eq”是一个非常糟糕的名称，我经常会忽略它，因为对我来说，“eq”表示比较...... - mmlac

显示剩余6条评论

53

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

$("div:eq(2)")

如果您无法控制它（例如，它是从另一个函数传递的），那么请使用.eq()

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

或者如果你想要其中的一段（比如第三、第四和第五个元素），可以使用.slice()

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

- nickf

1

一开始在寻找切片，但不确定如何搜索。感谢您超出原始问题所要求的范围。 - Samik R

4

对于偶然看到这篇答案的人，需要注意的一个有用的点是：nth-child选择器是从1开始标号的，而:eq或.eq()则是从0开始标号的。 - Sudhanshu Mishra

1

你应该使用.eq()而不是:eq()。这样可以稍微提高性能。 - Qwerty

14

我认为你可以使用这个。

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

它在匹配的每个ul中查找第二个li并记录下来。

- phagento

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

- tilak

4

如果您已经将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创建的对象视为索引数组。

- Au.Merci

没错，还有一个（希望有用的）提示：如果行包含一系列<select>元素，并且您想要选定的组合框元素，请使用**$(row).val();**。 - Matt

2

如果我理解您的问题正确，您可以始终像以下这样包装get函数：

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

- user1205577

3

这只是“费力的方式”，而eq()函数可以免费提供这种功能。 - Caumons

2

如果您想在循环中获取特定的元素/节点或标签，例如：

<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)');

e.g.

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

除此之外，还可以通过其他方法实现。

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

当HTML <tag>具有唯一的类名时，首选方法更有效。

注意：当目标元素或节点没有类名时，使用第二种方法。

要了解更多，请访问https://api.jquery.com/eq/

- Vrushal Raut

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>

- Sanjay Verma

首先，我创建了一个匿名函数，它会自动触发。在其中，我使用siblings找到了三个父div。然后我遍历了所有3个父div，并检查每个子元素的长度。我如何确定是否是父div中的最后一个div。现在，我正在弹出每个3个主要父div的最后一个div的html。 - Sanjay Verma

你可以编辑你的回答，而不是在评论中提供信息 :) - T3 H40

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>

当它运行时，有两个项目在有序列表中显示，第一和第三项。第二项被隐藏了。

- Eric Leschinski

注意：计数从0开始；第一个索引为0，第二个索引为1，以此类推.... - KNU

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Christian C. Salvadó · Accepted Answer

你可以使用:eq选择器，例如：

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

或者使用eq(int)函数：

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

还要记得索引是从零开始的。