jquery count兄弟不會返回正確的結果？

我想算sibling通過類，jquery count兄弟不會返回正確的結果？

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>

有一系列與同一類羣體，我想動態計數目標羣體的兄弟例如在第一組。

來源

2012-05-11 laukok

兄弟姐妹+ 1 =答案 – musefan

所有'.item-sibling'元素，但第一一個有兄弟姐妹......你有4個'.item-holder'元素，它們是第一個.item-sibling元素的兄弟姐妹。所有其他'.item-sibling'元素沒有兄弟姐妹。我認爲你沒有得到正確的術語......你真正的問題是什麼？你想用這些代碼實現什麼？ *編輯：*在另一種情況下，你得到6個元素，因爲你得到前兩個'.item-sibling'元素的同胞聯合。 –

你想找什麼號碼？使用'item-sibling'類來計算元素的數量使用'$（'。item-sibling'）。lenght' – ManseUK

你可以做

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

或者......

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

編輯：閱讀你的更新後，我建議如下：

1）添加一個通用「組」班給每個組。例如，

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

2）然後利用該類的找到所有的「兄弟姐妹」：

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

來源

2012-05-11 15:06:19 jmar777

謝謝，jmar。我得到'9'作爲結果，但它應該是'5' ... – laukok

@lauthiamkok：不要試圖找到解決方案，請解釋你的實際問題是什麼。也許你根本不需要/不需要'.siblings（）'！你只是想計算'.item-sibling'元素？ –

在閱讀您更新的問題後，我必須同意@Felix - 您所描述的不是真正的兄弟姐妹。在你的問題中，什麼定義了兄弟姐妹？在這一點上你真正描述的只是具有相同類的所有元素......這只是'$（'。item-sibling'）.length'。 – jmar777

這是因爲兄弟姐妹是其他。試試jQuery andSelf()，其中包含目標元素到獲取的集合。

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

和你有第二個HTML，你有2 .item-sibling這是0和1。 jQuery得到0的兄弟姐妹（.item-holder，包括1）和1的兄弟姐妹（.item-holder，包括0），總共創建了6個。

來源

2012-05-11 15:07:57 Joseph

['andSelf']（http://api.jquery.com/andSelf/）現在已被棄用，因爲它是JQuery 1.8，它的替換是['addBack（）']（http://api.jquery.com/addBack /）。 – johntrepreneur

根據jquery文檔。

「原始元素不包含在兄弟姐妹中，當我們希望在DOM樹的特定級別查找所有元素時，記住這一點非常重要。」

裁判：http://api.jquery.com/siblings/

來源

2012-05-11 15:09:15 jayanth

如果要算帶class = 「項同胞」，爲什麼不只是做

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

這將統計所有5個格的所有div？

來源

2012-05-11 15:10:08

好了，現在我們清楚自己想要什麼，如果你要組一個參考，你可以簡單地做：

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

來源

2012-05-11 15:24:25

謝謝Felix，我現在也有一個解決方案'var len = $（'。item-sibling'）。unwrap（）。siblings（）。css（{background：'red'}）。length; \t \t alert（len）;'也許不如你的，但它的工作原理。 – laukok

我不明白你爲什麼繼續使用'.siblings（）'，但是如果你有它的樂趣;） –

我的錯誤是繼續與兄弟姐妹進行:-) – laukok

jquery count兄弟不會返回正確的結果？

回答

相關問題