Question

我有以下标记：

    <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元素到“历史记录”，如下所示：

    <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个兄弟姐妹
历史
- 第一匹配元素（狗） - ＆gt; 3个兄弟姐妹（猫，老鼠，猴子）
- 第二匹配元素（鼠标） - ＆gt; 3个兄弟姐妹（猫，狗，猴）
- 第3匹配元素（猴子） - ＆gt; 3个兄弟姐妹（猫，狗，老鼠）
- 结果集（猫* 3，狗* 2，小鼠* 2，猴子* 2）
- 最终结果集（删除欺骗）（猫，狗，老鼠，猴子） - 总共4个

3 + 2 + 4 = 9

它是如何工作的？

Answer 1

为了理解这一点，让我们一块一块地完成它。首先，使用了选择器。

$('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）会产生重复数量。

Answer 2

我要稍微备份一下，然后建议另一种找到所需内容的方法 - 找到没有链接的所有嵌套li。它不是1-liner，但它也不复杂/错综复杂。这是一个小提琴：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.");

Answer 3

你计算完全没问题。

对于a内的三个Histories标签中的任何一个，您都会获得3个兄弟姐妹。删除重复，导致所有四个。

jquery了解兄弟姐妹方法的工作原理

3 个答案: