如何获得第n个jQuery元素

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

304313 次浏览
小开

你可以使用:情商选择器，例如:

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

或eq (int)函数:

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

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

小开
最佳答案

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

它就是::eq()操作符。它就像get()一样使用，但它返回jQuery对象。

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

小开

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

$("div:eq(2)")

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

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

或者如果你想要其中的一部分(比如第三、第四和第五元素)，使用.slice()

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

我想你可以用这个

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

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

小开

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

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
// ...
}
小开

.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" );
< p > < a href = " http://api.jquery.com/eq/ " rel =“nofollow”> 更多信息:.eq()

小开

使用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>

当它运行时，有序列表中有两项显示First和Third。第二个藏起来了。

小开

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

var $someJqueryEl = $($('.myJqueryEls').get(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创建的对象视为索引数组。

小开 
 $(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>
小开

如果你想在循环中获取特定的元素/节点或标签。

<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>具有唯一的类名时，first方法更有效。

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

有关更多信息，请参考https://api.jquery.com/eq/


提交答案