Question

我觉得以前可能会问过，但我似乎无法找到它，所以我会问自己。

我想选择隐藏其子项“原因”的父元素。例如，一组元素基本上是“隐藏的”，但不是因为它们有display:none，而是因为沿途的某些父元素有display:none。

如果我只有一个子元素，并且我知道它是hidden，我怎么能轻易找到导致它为hidden的父元素。

我意识到一个解决方案只是递归循环遍历父母，如...

function findHiddenParent(el){
  var $el = $(el);
  if($el.css('display') == 'none'){
    return $el;
  }
  return findHiddenParent($el.parent());
}

注意我没有测试过上面的代码，只是为了概念化解决方案

但有没有更简单的方法，也许是通过一些选择器魔术？

Answer 1

您可以使用.parents()，然后将其过滤到隐藏的最后一个元素。

$(child).parents(":hidden").last().show();

它将选择具有display: none

的层次结构中最高的父元素

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

注意，:hidden也会选择宽度/高度为0的元素。

Answer 2

这与你的相似：

function findHiddenParents ( el ) {
    return $(el).parents().filter(function () {
        return $(this).css('display') == 'none';
    });
}

这将返回隐藏的所有祖先。如果您只想要最近或最远，则可以分别使用.first()或.last()返回。

如果你真的没有对隐藏哪些元素感兴趣，但只是想透露它们，那么你就不能比这更简单了：

$(el).parents().show()

Answer 3

这是我在纯JavaScript中的方式。不知怎的，我觉得它比涉及循环或回调的jQuery解决方案更清晰（Kevin B的单行程看起来很棒！）。缺点是，它更长，并且它不检查计算的样式：

<div id="container">
    <div id="a" style="display: none;">A
        <div id="b">B
            <div id="c">C</div>
        </div>
    </div>
</div>

var currentNode = document.getElementById('c');
while(currentNode.parentNode && currentNode.style.display !== 'none') {
    currentNode = currentNode.parentNode;
}
alert(currentNode.id);

http://jsfiddle.net/nc4h2/

选择隐藏其子项的父元素

3 个答案: