Question

如何使用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/

Answer 1

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

$('ul li').parents().each(function () {
    console.log(this);
});

Answer 2

我希望你需要对导线施加限制，以防你寻找的父母不是你开始的地方的祖先。否则，你要么以无限循环结束，要么就没有父母了。

例如，一个从元素到具有特定标记名称的父项的泛型函数，您可能会这样做（不是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节点，因此只要您不从文档节点开始，就可以随时到达。

我如何用jQuery遍历祖先？

2 个答案: