如何获得jQuery中特定元素的下（x）个孩子/兄弟姐妹？

Question

This is just an illustrative example, but say I had a list of divs containing elements:

<div>
<p></p>
<p></p>
<p></p>
</div>

<div>
<p></p>
<p></p>
<p></p>
</div>

<div>
<p></p>
<p></p>
<p></p>
</div>

My aim is to run a loop that goes through each div, gets the first 2 children and applies a particular CSS class to them.

How would I go about achieving this?

Note that this might not necessarily be two elements, at a later date it may become the first ten elements (or more).

Answer 1

$('div > :lt(2)').addClass(...);

:lt选择器使用从零开始的索引。

Answer 2

Another option would be to do it this way:

$('div p').slice(0,2).css('color','red')

This is actually the preferred way because lt(2) is not a native CSS selector so you lose some efficiency in the query.

Because :lt() is a jQuery extension and not part of the CSS specification, queries using :lt() cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method.

Answer 3

You can use the lt jQuery selector

$('div p:lt(2)').each(function(index, value) {
    // do something with $(value)
});

Answer 4

You can call children() followed by slice() :

var childCount = 2;
$("div").each(function() {
    $(this).children().slice(0, childCount).addClass("yourClass");
});

Answer 5

You could try something like this with nested loops:

var amt = 2;

$('div').each(function(){
    $(this).children().each(function(index, item){
        if(index == amt) return false;
        $(this).addClass('something');
    });
});

Answer 6

查看您的标记，您可以尝试选择第一个孩子

$('div > :lt(2)')

Answer 7

$('div').each(function(){
    var c = $(this).children();
    for(var i=0; i < 2 && i < c.length; i++)
        $(c[i]).html(i);
});