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.

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.

• javascript
• jquery
• siblings

• 1 All .item-sibling elements but the first one have siblings... you have 4 .item-holder elements which are the siblings of the first .item-sibling element. All other .item-sibling elements don't have siblings. I think you didn't get the terminology right... what is your actually issue? What are you trying to achieve with that code? edit: In the other case you get 6 elements because you get the union of siblings of the first two .item-sibling elements. – Felix Kling Commented May 11, 2012 at 15:06
• what number are you trying to find ? to count the number of elements with the class of item-sibling use $('.item-sibling').lenght – Manse Commented May 11, 2012 at 15:13
• Regarding my previous comment, it's vice versa: None of the .item-sibling elements but the first one have siblings (couldn't edit anymore). – Felix Kling Commented May 11, 2012 at 15:14
• And with "sibling" you mean .item-sibling elements in that group? – Felix Kling Commented May 11, 2012 at 15:19
• yes ".item-sibling" elements in that group. – Run Commented May 11, 2012 at 15:20

5 Answers 5

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;

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.

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();

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."

ref : http://api.jquery.com/siblings/

If you want to count all divs with class="item-sibling", why not just do

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

This will count all 5 divs?