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

How can I hide parent element of all elements with a given class, but the parent element also has a specific class?

本文关键字：元素 何隐藏 隐藏      更新时间：2023-09-26

我想隐藏类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>

试试这个:

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

直接选择相关的子元素，瞄准它们的父元素(由相关的选择器过滤)，然后隐藏它们。

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

:
parent文档

另一个选择是使用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()

相关文章：