jquery count siblings no devuelve el resultado correcto?

Question

Quiero contar las sibling por clases,

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 

No incluye <div class="item-sibling">1</div>

cómo puedo incluirlo?

jsFiddle link

y si cambio el html a,

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

voy a tener 6 este momento. ¡Extraño!

EDITAR,

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

hay una serie de grupos con la misma clase , y quiero contar hermano de un grupo determinado de forma dinámica, por ejemplo, el primer grupo .

Answer 1

Usted puede hacer

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

O ...

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

---

Editar: después de leer su actualización, sugeriría lo siguiente:

1) Añadir un genérico clase de "grupo" para cada grupo. Por ejemplo,

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

2) A continuación, se aprovechan de esa clase para encontrar todos los "hermanos":

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

Answer 2

Se debe a que los hermanos son los otros . Pruebe jQuery andSelf() que incluye el elemento de destino para el conjunto recuperado.

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

---

Y el segundo HTML que tenga, usted tiene 2 .item-sibling que son 0 y 1. jQuery obtiene 0 's hermanos (.item-holder, incluyendo 1) y 1' s hermanos (.item-holder, incluyendo 0), que hace 6 en total.

Answer 3

Según la documentación de jquery.

"El elemento original no está incluido entre los hermanos, lo cual es importante recordar cuando deseamos encontrar todos los elementos en un nivel particular del árbol DOM".

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

Answer 4

Si desea contar con todos los divs class = "item-hermano", ¿por qué no hacer

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

Esto cuenta los 5 divs?

Answer 5

Ok, ahora que hemos aclarado lo que quiere, si usted tiene una referencia al grupo, sólo tiene que hacer:

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

Si usted tiene una referencia al elemento .item-sibling, hacer:

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

Esto supone que cada grupo tiene una clase común.

Si desea obtener una lista de número de elementos de cada grupo, hay que iterar sobre cada grupo:

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