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

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

来源

2013-04-22 bwright

试试这个：

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

来源

2013-04-22 17:33:20 Joe

哦，哇。我应该想到这一点，现在觉得失去这个简单的解决方案感到愚蠢。工作很好，谢谢！ – bwright 2013-04-22 17:37:35

直接选择相应的子元素，针对他们的父母（由相关的选择过滤），然后隐藏它们。

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

参见：
parent Documentation

来源

2013-04-22 17:33:42 nbrooks

也是一个有用的答案。虽然乔提供的答案首先出现，但它是新的信息。对我来说'parent（）'方法可以被过滤。我相信我会在将来使用它。谢谢！ – bwright 2013-04-22 17:42:06

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

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

来源

2013-04-22 17:41:56 Ian

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

回答

相关问题