jQuery的理解兄弟姐妹方法是如何工作

我有以下標記：jQuery的理解兄弟姐妹方法是如何工作

<ul id="selected-plays" class="clear-after"> 
    <li>Comedies 
     <ul> 
     <li><a href="/asyoulikeit/">As You Like It</a></li> 
     <li>All's Well That Ends Well</li> 
     <li>A Midsummer Night's Dream</li> 
     <li>Twelfth Night</li> 
     </ul> 
    </li> 
    <li>Tragedies 
     <ul> 
     <li><a href="hamlet.pdf">Hamlet</a></li> 
     <li>Macbeth</li> 
     <li>Romeo and Juliet</li> 
     </ul> 
    </li> 
    <li>Histories 
     <ul> 
     <li>cat</li> 
     <li><a href="hamlet.pdf">dog</a></li>    
     </ul> 
    </li> 
    </ul>

我試圖讓所有不包含任何鏈接嵌套li元素。所以，我的jQuery看起來像

var list = $('li > a').parent().siblings();

返回6個結果，我知道這一點，但假設我添加一些額外的鋰元素，以「春秋」像這樣：

<li>Histories 
     <ul> 
     <li>cat</li> 
     <li><a href="hamlet.pdf">dog</a></li> 
     <li><a href="hamlet.pdf">mouse</a></li> 
     <li><a href="hamlet.pdf">monkey</a></li> 
     </ul> 
    </li>

如果我運行相同jquery代碼，我現在得到了9個結果，原來的6加上包含「dog」，「mouse」和「monkey」的3 li元素。這是我困惑的地方。這是我認爲它的工作原理。

喜劇 - 3個兄妹
悲劇 - 2個兄妹
歷史
- 第一匹配元件（狗） - > 3點的兄弟姐妹（貓，小鼠，猴）
- 第二匹配元件（小鼠） - > 3個兄弟姐妹（貓，狗，猴）
- 第3個配對元素（猴子） - > 3兄弟姐妹（貓，狗，老鼠）
- 結果集迄今爲止（貓* 3，狗* 2，鼠標* 2，猴* 2）
- 最終結果集（去除愚弄）（貓，狗，小鼠，猴） - 4總

3 + 2 + 4 = 9

它是如何工作的？

來源

2014-07-23 joe smo

爲了理解這一點，讓我們一一瀏覽。首先，使用選擇器。

$('li > a')

這是要創建a元件，其是list元素的子元素的陣列。在您的第一個html塊中，這將返回3 a元素。

.parent()

接下來，你看每個3種a元素的父。這自然是li元素。我們再次以3個元素的數組結束，這次是li。現在

.siblings()

，每個li元件的檢查。它尋找siblings，因爲在同一級別的元素（基本上，這只是父級的子元素除了當前元素之外的一個元素）。因此，對於第一個示例中，這是（4-1）+（3-1）+（2-1）= 6

的變化導致稍微不同的迭代。在第一個選擇器$('li > a')之後，現在有5個a元素匹配。 .parent()產生5 li元素。前兩套是.siblings()是一樣的。但是對於歷史，發生的是每個li要求其兄弟姐妹（不包括其本身）。所以對於你的第二個例子，你得到（4-1）+（3-1）+（4-1）+（4-1）+（4-1）= 14. 然而，這些被添加到數組中jQuery管理的元素，並且該管理的一部分是不包含重複項。歷史將有重複。

前兩組不受影響，留下相同的（4-1）+（3-1）。但是，由於不允許重複，所以歷史集將取而代之爲（4-1）+（4-3）+（4-4），這是9來自（3 + 2 + 3 + 1 + 0）的地方。請注意，最後兩組（4-3和4-4）本應排除自己，但由於重複，排除了更多元素。總共差異（2 + 3）產生重複量。

來源

2014-07-23 21:26:50

是的，它似乎是它自己消除欺騙。我在任何地方都找不到它真的這麼做，所以它只是一種預感。感謝您的驗證！ –

我要備份一下，只是建議一種找到你要找的東西的替代方法 - 找到沒有鏈接的所有嵌套的li。這不是一個班輪，但它也不復雜/令人費解。這裏是一個小提琴：http://jsfiddle.net/Lb3AU/1/

var list = []; 
//Select all of the lis we are interested in 
$('#selected-plays > li > ul > li').each(function(){ 
    //Does this li have any anchor children? If no, add this to our list 
    if($(this).find('a').length == 0){ 
     list.push($(this)); 
    } 
}); 

alert("Found " + list.length + " li's with no links.");

來源

2014-07-23 21:17:42

你計算完全OK。

對於Histories內部的三個a標籤中的任何一個，您將獲得3個兄弟姐妹。重複刪除，結果在所有四個。

來源

2014-07-23 21:27:45 Alireza

jQuery的理解兄弟姐妹方法是如何工作

回答

相關問題