javascript jquery countsiblings 没有返回正确的结果？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10553962/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery count siblings does not return correct result?
提问by laukok
I want to count the siblingby classes,
我想sibling按班级数，
html,
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,
jQuery，
var len = $('.item-sibling').siblings().css({background:'red'}).length;
alert(len);???? // return 4
it does not include <div class="item-sibling">1</div>
它不包括 <div class="item-sibling">1</div>
how can I include it?
我怎样才能包括它？
jsfiddle link
jsfiddle链接
and if I change the html to,
如果我将 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>
I will get 6this time. Strange!
6这次我会得到的。奇怪的！
EDIT,
编辑，
<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>
There are series of groups with the same class, and I want to count a targeted group's sibling dynamically for instance the first group.
有一系列具有相同类的组，我想动态计算目标组的兄弟姐妹，例如第一组。
回答by jmar777
You can do
你可以做
var len = $('.item-sibling').siblings().andSelf().css({background:'red'}).length;
Or...
或者...
var len = $('.item-sibling').parent().children().css({background:'red'}).length;
Edit: after reading your updated, I would suggest the following:
编辑：阅读您的更新后，我建议如下：
1) Add a generic "group" class to each group. E.g.,
1）为每个组添加一个通用的“组”类。例如，
<div class="group group-a">
...
</div>
2) Then take advantage of that class to find all "siblings":
2）然后利用该类查找所有“兄弟姐妹”：
var len = $('.item-sibling:first').closest('.group')
.find('.item-sibling').css({background:'red'}).length;
回答by Felix Kling
Ok, now that we clarified what you want, if you have a reference to the group, you can simply do:
好的，现在我们澄清了您想要什么，如果您有对组的引用，您可以简单地执行以下操作：
var items = $group.find('.item-sibling').length;
If you have a reference to the an .item-siblingelement, do:
如果您有对 an.item-sibling元素的引用，请执行以下操作：
var items = $item.closest('.group').find('.item-sibling').length;
This assumes that each group has a common class.
这假设每个组都有一个公共类。
If you want to get a list of number of elements in each group, you have to iterate over each group:
如果要获取每个组中元素数量的列表，则必须遍历每个组：
var num_items = $('.group').map(function() {
return $(this).find('.item-sibling').length;
}).get();
回答by Joseph
It's because siblings are the others. Try jQuery andSelf()which includes the target element to the fetched set.
这是因为兄弟姐妹是其他人。尝试andSelf()将目标元素包含到获取的集合中的jQuery 。
var len = $('.item-sibling')
.siblings()
.andSelf()
.css({background:'red'})
.length;
And the second HTML you have, you have 2 .item-siblingwhich are 0and 1. jQuery gets 0's siblings (.item-holder, including 1) and 1's siblings (.item-holder, including 0), which makes 6 all in all.
您拥有的第二个 HTML，您有 2 个.item-sibling是0和1。jQuery 获取0的兄弟姐妹 ( .item-holder, 包括1) 和1兄弟姐妹 ( .item-holder, 包括0)，总共有 6 个。
回答by jay
According to jquery documentation .
根据 jquery 文档。
"The original element is not included among the siblings, which is important to remember when we wish to find all elements at a particular level of the DOM tree."
“原始元素不包含在兄弟元素中，当我们希望在 DOM 树的特定级别找到所有元素时，记住这一点很重要。”
回答by Declan McNulty
If you want to count all divs with class="item-sibling", why not just do
如果你想用 class="item-sibling" 计算所有的 div，为什么不直接做
$('.item-sibling').length;
This will count all 5 divs?
这将计算所有 5 个 div？
