选择隐藏其子元素的父元素

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/