1
Geek asks and answers

Jquery count siblings not returning correct result?

I want to count with siblingclasses,

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 to enable it?

jsfiddle link

and if I change 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>

This time I will receive 6. Weird!

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 a number of groups with the same class , and I want to dynamically count a dynamic group, for example the first group .

+5
source share
5 answers

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 update, I suggest the following:

1) Add a common class "group" to each group. For instance.

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

2) Then use this class to find all the "brothers and sisters":

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

, - . jQuery andSelf(), .

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

HTML 2 .item-sibling, 0 1. jQuery 0 siblings (.item-holder, 1) 1 siblings (.item-holder, 0), 6.

+2

, , , , , :

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

jquery.

" , , DOM".

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

+1
source

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

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

Will this count all 5 sections?

0
source

More articles:


All Articles