5

我想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链接

如果我将 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>

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

4

5 回答 5

8

你可以做

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;
于 2012-05-11T15:06:19.290 回答
2

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

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），总共有 6 个。

于 2012-05-11T15:07:57.713 回答
2

好的，既然我们已经澄清了您想要的内容，如果您对组有引用，您可以简单地执行以下操作：

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

如果您有对 an.item-sibling元素的引用，请执行以下操作：

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

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

如果要获取每个组中元素数量的列表，则必须遍历每个组：

var num_items = $('.group').map(function() {
    return $(this).find('.item-sibling').length;
}).get();
于 2012-05-11T15:24:25.663 回答
1

根据 jquery 文档。

“原始元素不包含在同级元素中，当我们希望在 DOM 树的特定级别查找所有元素时，记住这一点很重要。”

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

于 2012-05-11T15:09:15.957 回答
0

如果您想计算所有带有 class="item-sibling" 的 div，为什么不这样做

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

这将计算所有5个div？

于 2012-05-11T15:10:08.773 回答