Question

我想隐藏具有类parent的li元素的所有实例，这些实例具有类child-1的直接子div元素。这是一个伪代码示例，其中方法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 Documentation

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

DEMO： 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()

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

3 个答案: