jQuery：确定 jQuery 对象是否是根 html 标签

Question

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

$.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] 更好的方法来知道我是否'已经到达根 标记了吗？

Answer 1

$foo.is('html')

不过，您似乎正在重新实现 parents() 。

Answer 2

不要与第一个孩子进行比较，只需查看是否返回了父母：

var $foo = $(this);

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

这是一个工作小提琴。

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();

• http://api .jquery.com/parents/
• http://api.jquery.com/andself/