1

如何使用 jQuery 遍历祖先？

当前代码陷入递归循环：

HTML：

<html>
    <body>
        <div>
            <ul>
                <li></li>
            </ul>
        </div>
    </body>
</html>

JS：

function traverse($node){
  while ( $node.get(0) !== $("html").get(0) ) {
    console.log($node);
    traverse($node.parent());
  }

}

//traverse($("ul li"));

要观察问题，请取消注释最后一行，但请注意它可能会冻结您的浏览器。

在 JSFiddle 上也是如此：http: //jsfiddle.net/WpvJN/1/

4

2 回答 2

5

您可以使用以下方式获取集合.parents()并进行迭代.each()：

$('ul li').parents().each(function () {
    console.log(this);
});
于 2012-11-14T00:34:44.833 回答
0

我希望你需要限制遍历，以防你寻找的父级不是你开始的地方的祖先。否则，您要么陷入无限循环，要么父母用完。

例如，一个从元素到具有特定标签名称的父元素的通用函数，你可能会这样做（不是 jQuery，但我相信你可以在必要时转换它）：

function upTo(tagName, el) {
  tagName = tagName.toLowerCase();

  // Make sure el is defined on each loop
  while (el && el.tagName && el.tagName.toLowerCase() != tagName) {
    el = el.parentNode;
  }
  return el;
}

另一种方法是检查el.parentNode并在没有更多内容时停止。

HTML 文档中总是有一个 HTML 节点，所以只要你不从文档节点开始，你就会一直到达那里。

于 2012-11-14T01:26:08.363 回答