Question

我实际上在做手风琴/滑动菜单。在这里，我想滑动兄弟姐妹＆gt; ul已经打开（或显示）。我能进一步简化吗？

$(this).parent("li").siblings("li:has(ul)").children("ul").slideUp("fast");

我也注意到我不能跳过children（）部分并执行类似

的操作

$(this).parent("li").siblings("li:has(ul) ul").slideUp("fast");

为什么兄弟姐妹（“li：has（ul）ul”）不同于兄弟姐妹（“li：has（ul）”）。孩子（“ul”）？

Answer 1

在第一种情况下，您选择兄弟姐妹的列表元素，只要这些列表元素将无序列表作为子元素，然后您将获得无序列表子元素。在第二种情况下，您正在寻找无序列表的兄弟姐妹，这些列表是列表元素的子（立即或嵌套）。问题是你正在查看列表元素的兄弟姐妹，它没有无序列表兄弟（只有列表元素兄弟）。

关键是兄弟姐妹方法中的选择器是一个过滤器。它仅用于从唯一的兄弟节点列表中进行选择，这些兄弟节点符合选择器中指定的条件。在您的情况下，没有任何兄弟姐妹能够（可以）匹配第二种情况下的标准。

示例：

<ul>
     <li id='li0' class='selected'>
         <ul id='ul0' class='child'>
            ...
         </ul>
     </li>
     <li id='li1' class='sibling'>
        <ul id='ul1' class='child'>
           ...
        </ul>
     </li>
     <li id='li2' class='sibling'>
        <ul id='ul2' class='child'>
           <li id='li2_0' class='grandchild'>
              <ul id='ul2_0' class='greatgrandchild'>
                 ...
              </ul>
           </li>
        </ul>
    </li>
    <li id='li3'>
    </li>
</ul>

$('.selected').siblings('li:has(ul)')将返回包含ID li1和li2的列表元素集合。 $('.selected').siblings('li:has(ul) ul') will return an empty set because it is the same as $（'。selected'）。siblings（）。filter（'li：has（ul）ul'）。由于兄弟姐妹返回带有ids li1' and li2`的集合，因此这些集合与选择列表元素的无序列表子集的过滤器（具有无序列表子集）不匹配。

您可以使用以下代码段来查看效果。

$(function() {
    dumpIds('siblings',$('.selected').siblings());
    dumpIds('filtered sibs',$('.selected').siblings('li:has(ul)'));
    dumpIds('ul filtered sibs',$('.selected').siblings('li:has(ul) ul'));
});

function dumpIds(title,elements) {
    var idset = '';
    var sep = '';
    elements.each( function() {
        idset = idset + sep + this.id;
        sep = ', ';
    });
    alert(title + ':' + idset);
}

Answer 2

查找<li>内有<ul>的所有直接子女：

$("li:has(ul)").children("ul")

//or
$("li:has(ul) > ul")

查找<li>内有<ul>的所有后代：

$("li:has(ul) ul")

Answer 3

这是由于兄弟姐妹选择器的性质。可以这样想：它需要$('li:has(ul) ul')和$(this).parent("li").siblings()并返回一个填充了两者交集的jQuery对象。换句话说，它正在寻找无序列表，这些列表是列表项的子项，其中UL子项是$(this).parent的兄弟。

jQuery选择器问题

3 个答案: