anh chị em jquery không trả lại kết quả đúng?

Question

Tôi muốn đếm sibling bởi lớp,

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 

nó không bao gồm <div class="item-sibling">1</div>

làm thế nào tôi có thể bao gồm nó?

jsfiddle link

và nếu tôi thay đổi 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> 

tôi sẽ nhận được 6 thời gian này. Lạ thật!

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> 

Có hàng loạt các nhóm với cùng lớp, và tôi muốn đếm anh chị em một nhóm nhắm mục tiêu của động ví dụ như nhóm đầu tiên .

Answer 1

Bạn có thể làm

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

Hoặc ...

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

---

Chỉnh sửa: sau khi đọc được cập nhật của bạn, tôi xin đề nghị như sau:

1) Thêm một chung lớp "nhóm" cho mỗi nhóm. Ví dụ:

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

2) Sau đó, tận dụng lợi thế của lớp đó để tìm tất cả "anh chị em":

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

Answer 2

Đó là bởi vì anh chị em là những người khác . Hãy thử jQuery andSelf() bao gồm phần tử đích cho bộ đã tìm nạp.

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

---

Và HTML thứ hai mà bạn có, bạn có 2 .item-sibling là 0 và 1. jQuery được 0 anh chị em của (.item-holder, bao gồm 1) và 1 anh chị em của (.item-holder, bao gồm 0), mà làm cho tất cả 6 tất cả trong tất cả.

Answer 3

Theo tài liệu jquery.

"Phần tử gốc không được bao gồm trong số các anh chị em, điều quan trọng cần nhớ khi chúng tôi muốn tìm tất cả các phần tử ở cấp độ cụ thể của cây DOM."

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

Answer 4

Nếu bạn muốn đếm tất cả các div với class = "item-sibling", tại sao không chỉ làm

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

này sẽ đếm tất cả 5 divs?

Answer 5

Ok, bây giờ mà chúng ta làm rõ những gì bạn muốn, nếu bạn có một tham chiếu đến nhóm, bạn chỉ có thể làm:

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

Nếu bạn có một tham chiếu đến một yếu tố .item-sibling, làm:

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

Giả định rằng mỗi nhóm có một lớp chung.

Nếu bạn muốn có được một danh sách các số nguyên tố trong mỗi nhóm, bạn phải lặp qua từng nhóm:

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