jquery count 형제가 올바른 결과를 반환하지 않습니까?

Question

나는 sibling에 의해 클래스을 계산하려면,

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 

그것은 <div class="item-sibling">1</div>

내가 그것을 어떻게 포함 할 수 있습니다 포함되지 않습니다?

jsfiddle link

나는에 HTML,

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

을 변경하면 나는 6이 시간을 얻을 것이다. 이상한!

편집,

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

는 같은 클래스와 그룹의 시리즈가있다, 그리고 나는 첫 번째 그룹 예를 들어 동적으로 대상 그룹의 형제를 계산합니다. 당신은

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

또는 작업을 수행 할 수 있습니다

Answer 1

...

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

---

편집 :

이

1) 일반적인 추가 :이 업데이트 읽은 후, 나는 다음과 같은 제안 "group"클래스를 각 그룹에 추가합니다. 예를 들어,

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

2) 모든 "형제"를 찾아 그 클래스를 활용 : 형제 자매가 다른이기 때문에

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

Answer 2

그것입니다. 가져온 세트에 대상 요소를 포함하는 jQuery andSelf()을 시도하십시오.

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

---

그리고 당신은 두 번째 HTML, 당신은 2 0 및 1이다 .item-sibling 있습니다. jQuery는 0 형제 (을 포함하여 .item-holder)와 1 형제 (.item-holder, 0 포함)를 모두 가져 오므로 모두 6이됩니다.

Answer 3

jquery 설명서에 따르면.

"DOM 트리의 특정 레벨에서 모든 요소를 ​​찾으려고 할 때 기억해야 할 원래 요소는 형제 사이에 포함되지 않습니다."

심판 :

Answer 4

당신이 클래스 = "아이템 형제", 왜 단지

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

이 모두 5 개 된 div를 계산합니다하지 모든 div의 수를 계산하려면 http://api.jquery.com/siblings/?

우리는 당신이 그룹에 대한 참조가있는 경우, 당신은 간단하게 할 수있는, 원하는 것을 명확히하는 것이 지금

Answer 5

확인 : 당신은 An .item-sibling 요소에 대한 참조가있는 경우,

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

수행

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

여기에는 각 그룹에 공통 클래스가 있다고 가정합니다.

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