jquery count siblings does not return correct result?
Solution 1
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.,
<div class="group group-a">
...
</div>
2) Then take advantage of that class to find all "siblings":
var len = $('.item-sibling:first').closest('.group')
.find('.item-sibling').css({background:'red'}).length;
Solution 2
It's because siblings are the others. Try jQuery andSelf()
which includes the target element to the fetched set.
var len = $('.item-sibling')
.siblings()
.andSelf()
.css({background:'red'})
.length;
And the second HTML you have, you have 2 .item-sibling
which are 0
and 1
. jQuery gets 0
's siblings (.item-holder
, including 1
) and 1
's siblings (.item-holder
, including 0
), which makes 6 all in all.
Solution 3
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-sibling
element, do:
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();
Solution 4
According to jquery documentation .
"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."
Comments
-
Run almost 2 years
I want to count the
sibling
by classes,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
it does not include
<div class="item-sibling">1</div>
how can I include it?
jsfiddle link
and if I change the html to,
<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
6
this time. Strange!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.