javascript - 如何隐藏具有给定类的所有元素的父元素，但父元素也具有特定类？

Question

我想隐藏具有 class 的 li 元素的所有实例，这些实例具有 classparent的直接子 div 元素child-1。这是一个伪代码示例，该方法hideParent()将隐藏所选元素的父级：

$("li.parent > div.child-1").hideParent();

以下是我的 HTML 示例，其中li.parent应隐藏第二个和第三个元素。

<li class="parent">
    <div class="child-0"> ... </div>
</li>
<li class="parent">
    <div class="child-1"> ... </div>
</li>
<li class="parent">
    <div class="child-1"> ... </div>
</li>

Answer 1

试试这个：

$("li.parent > div.child-1").parent().hide();

Answer 2

直接选择相关子元素，定位其父元素（由相关选择器过滤），然后隐藏它们。

$("div.child-1").parent('li.parent').hide();

请参阅：
parent文档

Answer 3

另一种选择是使用filter：

$("li").filter(function () {
    var $this = $(this);
    var isParent = $this.hasClass("parent");
    var childMatchCount = $this.children("div").filter(".child-1").length;
    return isParent && childMatchCount;
}).hide();

演示：http: //jsfiddle.net/GEhfP/

尽管这可以通过多种方式进行优化。但对我来说，在非常明确的意义上，它更“可读”。使用 jsperf，我能最快filter开始工作的是：

$("li.parent").filter(function () {
    return $(this).children("div.child-1").length;
}).hide();

@Joe 的回答是最快的：$("li.parent > div.child-1").parent()