jQueryparents() - 单独处理每一层

Question

当我有一个匹配多个元素的类时，有没有一种方法可以单独处理每一层父级，

$(".myWidespreadClass").parents() // [immediateParent1, immediateParent2, deeperAncestor1, deeperAncestor2]

我希望能够运行类似 .each() 的东西，但是第一次迭代运行在直接父级上，第二次迭代运行在更深的祖先上下一个级别等等...

Answer 1

有趣的问题。我想你会想要一个循环，像这样：

var parents = $(".myWidespreadClass").parent(); // Not plural!
while (parents[0]) {
    // Process them, e.g.
    parents.each(function() { /* ... */ });

    // Get the next tier
    parents = parents.parent(); // Not plural!
}

Live example | 实时源 - 更新，但请参阅下文，这可能会提前终止

您可能想早点终止，例如：

while (parents[0] && parents[0].nodeName !== "BODY") {

...取决于您的需要。我在示例中做到了。 见下文。

更新实际上，您必须小心提前终止，可能在处理父母时最好进行过滤，如下所示：

实例 | 实时源

var parents = $(".myWidespreadClass").parent();
while (parents[0]) {
    // Process them, e.g.
    parents.each(function() {
        if ($.contains(document.body, this)) {
            // This one is under `body`, process it
            display("Visiting " + this.nodeName + "." + this.className);
        }
    });

    // Get the next tier
    parents = parents.parent(); // Not plural!
}

原因是您的初始元素集可能位于 DOM 中截然不同的级别，因此对于其中一些元素，您将比其他元素更快到达最顶层元素。上面的 body 检查可能不适合您的需求，但您明白了。