Question

这是我的code：

<div class="parent">
    <div class="child">&nbsp;</div>            
    <div class="child">&nbsp;</div>
    <div class="child">&nbsp;</div>
    <div class="child">&nbsp;</div>    
</div>

<div class="parent">
    <div class="child">&nbsp;</div>            
    <div class="child">&nbsp;</div>
    <div class="child">&nbsp;</div>
</div>

$('.child').each(function() {
    $(this).parent().addClass('childParent');
    console.log("step");
});?

但正如你所看到的那样，它addClass 7次，这是没有必要的。是否可以减少每一步？事实上，在这个例子中，只有两次addClass就足够了。

Answer 1

是：只需在集合上调用.parent()即可。元素不会在jQuery集合中重复

$('.child').parent().addClass('childParent');

Answer 2

请注意，其他答案的方法更好，但如果您因任何原因确实需要保留.each()电话，这是另一种选择。

您可以使用:first-child选择器确保每个父级只选择一个.child元素：

$('.child:first-child').each(function() {
    $(this).parent().addClass('childParent');
    console.log("step");
});

现在，它只会选择2个元素（每个.child元素中的第一个.parent元素），因此.each()调用只有两个元素可以迭代。< / p>

Answer 3

您是否有理由不直接引用父母？

$('div.parent').addClass('childParent');

Answer 4

虽然你可以调用每个孩子，然后让jquery使用一种独特的方法，但它可能不是最有效的用法。例如，如果每个父母有10个孩子，这意味着它需要花费10倍或更长的时间来选择每个孩子，然后检查它是否是唯一的。

相反，只选择父级来限制初始选择，然后使用“has（）”方法过滤那些。这看起来像这样：

$('div.parent:has(div.child)').addClass('childParent');

如何减少“每个”步骤？

4 个答案: