如何获得第n个jQuery元素

时间:2009-09-18 06:53:43

标签: jquery

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

11 个答案:

答案 0 :(得分:290)

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

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

Traversing/eq功能:

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

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

答案 1 :(得分:288)

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

这是::eq()运算符。它的使用方式与get()类似,但它返回jQuery对象。

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

答案 2 :(得分:47)

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

$("div:eq(2)")

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

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

或者如果你想要它们的一部分(比如第三,第四和第五个元素),请使用.slice()

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

答案 3 :(得分:11)

我认为你可以使用这个

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

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

答案 4 :(得分: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" );

For more information : .eq()

答案 5 :(得分:2)

如果你已经在一个变量中有了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创建的对象视为索引数组。

答案 6 :(得分:1)

如果我正确理解你的问题,你总是可以像这样包装get函数:

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

答案 7 :(得分: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)');

e.g。

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

以及其他方法

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

但是当HTML <tag>具有唯一的类名时,第一种方法会更有效。

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

了解更多关注https://api.jquery.com/eq/

答案 8 :(得分: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
   // ...
}

答案 9 :(得分: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>

运行时,有序列表中有两个项目显示,第一个和第三个。第二个是隐藏的。

答案 10 :(得分: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>