Question

假设我正在编写一个jQuery扩展方法。此方法应该爬上元素的祖先树，直到它到达文档的根<html>标记，此时它应该停止。我已经实现了这个，如下所示：

$.fn.foo = function() {

    var $foo = this;

    while($foo[0] !== $(document).children()[0]) {
        // do stuff with $foo
        $foo = $foo.parent();
    }

    // do stuff

};

我的问题是：有没有比$foo[0] !== $(document).children()[0]更好的方法来了解我是否已达到根<html>代码？

Answer 1

不要与第一个孩子进行比较，只要看看父母是否被退回：

var $foo = $(this);

while($foo.parent().length > 0) {
    // do stuff with $foo
    $foo = $foo.parent();
}

这是working fiddle。

Answer 2

$foo.is('html')

但您似乎正在重新实现parents()。

Answer 3

这个怎么样？

$.fn.foo = function() {

    var $foo = this;

    while($foo[0].tagName != 'HTML') {
        // do stuff with $foo
        $foo = $foo.parent();
    }

    // do stuff

};

或者，如果您实际上不需要遍历，但只想对给定节点的所有祖先执行操作，则可以使用.parents（），如下所示：

$.fn.foo = function() {

    var $foo = this;

    $foo.parents().andSelf().each(function() {
        // do stuff with $foo
    });

    // do stuff

};

Answer 4

这应停在HTML。

$foo.parents().andSelf().each(function() {
    // do something
    console.log(this.nodeName);
});

或者，如果您针对每个节点运行相同的jQuery方法，请执行以下操作：

$foo.parents().andSelf().someJQueryMethod();

jQuery：确定jQuery对象是否是root html标记

4 个答案: