jquery count Geschwister gibt das korrekte Ergebnis nicht zurück?

Question

Ich möchte, die sibling von Klassen zählen

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 

es nicht <div class="item-sibling">1</div> enthält

wie kann ich es aufnehmen?

jsfiddle link

und wenn ich die html,

ändern

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

werde ich 6 diesmal bekommen. Seltsam!

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> 

Es ist eine Reihe von Gruppen mit der gleichen Klasse, und ich mag die erste Gruppe eine Zielgruppe Geschwister dynamisch zum Beispiel zählen.

Answer 1

Sie tun können

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

Oder ...

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

---

Edit: nach der Aktualisierung zu lesen, würde ich vorschlagen, die folgenden:

1) Fügen Sie ein generisches "Gruppe" -Klasse für jede Gruppe. Z. B.

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

2) Dann nehmen Sie Vorteil dieser Klasse alle "Geschwister" zu finden:

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

Answer 2

Es ist, weil Geschwister sind die andere. Versuchen Sie jQuery andSelf(), die das Zielelement in die abgerufene Menge enthält.

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

---

Und die zweite HTML Sie haben, haben Sie 2 .item-sibling die 0 und 1 sind. jQuery bekommt 0 's Geschwister (.item-holder, einschließlich 1) und 1' s Geschwister (.item-holder, einschließlich 0), was 6 insgesamt macht.

Answer 3

Laut jquery Dokumentation.

"Das ursprüngliche Element ist nicht unter den Geschwistern enthalten, was zu beachten ist, wenn wir alle Elemente auf einer bestimmten Ebene des DOM-Baums finden möchten."

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

Answer 4

Wenn Sie alle divs mit class = "item-Geschwister" zählen wollen, warum nicht einfach tun

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

Dies wird alle 5 divs zählen?

Answer 5

Ok, jetzt, wo wir klären, was Sie wollen, wenn Sie einen Verweis auf die Gruppe haben, können Sie einfach tun:

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

Wenn Sie einen Verweis auf das ein .item-sibling Element haben, tun:

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

Dies setzt voraus, dass jede Gruppe eine gemeinsame Klasse hat.

Wenn Sie eine Liste der Anzahl der Elemente in jeder Gruppe erhalten möchten, müssen Sie über jede Gruppe durchlaufen:

var num_items = $('.group').map(function() { 
    return $(this).find('.item-sibling').length; 
}).get();