Question

我想要计算sibling 类，

HTML，

<div class="item-sibling">1</div>
<div class="item-holder"><div class="item-sibling">2</div></div>
<div class="item-holder"><div class="item-sibling">3</div></div>
<div class="item-holder"><div class="item-sibling">4</div></div>
<div class="item-holder"><div class="item-sibling">5</div></div>

jquery的，

var len = $('.item-sibling').siblings().css({background:'red'}).length;
alert(len); // return 4

它不包含<div class="item-sibling">1</div>

我该如何加入？

jsfiddle link

如果我将html更改为，

<div class="item-sibling">0</div>
<div class="item-sibling">1</div>
<div class="item-holder"><div class="item-sibling">2</div></div>
<div class="item-holder"><div class="item-sibling">3</div></div>
<div class="item-holder"><div class="item-sibling">4</div></div>
<div class="item-holder"><div class="item-sibling">5</div></div>

这次我会得到6。奇怪！

修改，

<div class="group-a">
    <div class="item-sibling">1</div>
    <div class="item-holder"><div class="item-sibling">2</div></div>
    <div class="item-holder"><div class="item-sibling">3</div></div>
    <div class="item-holder"><div class="item-sibling">4</div></div>
    <div class="item-holder"><div class="item-sibling">5</div></div>
</div>


<div class="group-b">
    <div class="item-sibling">1</div>
    <div class="item-holder"><div class="item-sibling">2</div></div>
    <div class="item-holder"><div class="item-sibling">3</div></div>
</div>

有一系列相同类的组，我想动态计算目标组的兄弟，例如第一组。

Answer 1

你可以做到

var len = $('.item-sibling').siblings().andSelf().css({background:'red'}).length;

或者...

var len = $('.item-sibling').parent().children().css({background:'red'}).length;

编辑：阅读更新后，我会建议如下：

1）为每个组添加一个通用的“组”类。如，

<div class="group group-a">
    ...
</div>

2）然后利用该课程找到所有“兄弟姐妹”：

var len = $('.item-sibling:first').closest('.group')
    .find('.item-sibling').css({background:'red'}).length;

Answer 2

这是因为兄弟姐妹是其他人。尝试jQuery andSelf()，其中包含获取集的目标元素。

var len = $('.item-sibling')
    .siblings()
    .andSelf()
    .css({background:'red'})
    .length;

您拥有的第二个HTML，有2 .item-sibling个0和1。 jQuery获取0的兄弟姐妹（.item-holder，包括1）和1的兄弟姐妹（.item-holder，包括0）总而言之。

Answer 3

好的，既然我们澄清了你想要的东西，如果你有一个对该组的引用，你可以简单地做：

var items = $group.find('.item-sibling').length;

如果您引用了.item-sibling元素，请执行：

var items = $item.closest('.group').find('.item-sibling').length;

这假设每个组都有一个共同的类。

如果您想获得每个组中元素数量的列表，您必须遍历每个组：

var num_items = $('.group').map(function() {
    return $(this).find('.item-sibling').length;
}).get();

Answer 4

根据jquery文档。

“原始元素不包含在兄弟姐妹中，当我们希望在DOM树的特定级别找到所有元素时，这一点很重要。”

参考：http://api.jquery.com/siblings/

Answer 5

如果你想用class =“item-sibling”计算所有div，为什么不做呢

$('.item-sibling').length;

这将计算所有5个div？

jquery count兄弟姐妹没有返回正确的结果？

5 个答案: