1

我觉得以前可以问过这个问题，但我似乎找不到它，所以我会问自己。

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

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

我意识到一种解决方案就是递归地遍历父母，例如......

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

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

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

4

3 回答 3

4

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

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

它将选择层次结构中最高的父元素display: none

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

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

于 2013-01-24T19:51:18.003 回答
3

这与您所拥有的类似：

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

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

如果您实际上对隐藏哪些元素并不感兴趣，而只是想将它们全部显示出来，那么您将无法比这更简单：

$(el).parents().show()
于 2013-01-24T19:50:49.090 回答
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/

于 2013-01-24T19:55:10.993 回答