Question

这只是一个说明性的例子，但我说我有一个包含元素的div列表：

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

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

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

我的目标是运行一个遍历每个div的循环，获取前2个子节点并将特定的CSS类应用于它们。

我将如何实现这一目标？

请注意，这可能不一定是两个元素，以后可能会成为前十个元素（或更多）。

Answer 1

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

:lt selector使用从零开始的指标。

Answer 2

另一种选择是这样做：

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

这实际上是首选方法，因为lt(2)不是本机CSS选择器，因此您在查询中会失去一些效率。

因为：lt（）是一个jQuery扩展而不是CSS规范的一部分，使用：lt（）的查询无法利用本机DOM querySelectorAll（）方法提供的性能提升。

Answer 3

您可以使用lt jQuery选择器

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

Answer 4

您可以拨打children()，然后拨打slice()：

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

Answer 5

你可以尝试使用嵌套循环：

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

如何在jQuery中获取特定元素的下一个（x）数量的子/兄弟？

7 个答案: