jQuery：确定 jQuery 对象是否是根 html 标记答案

【问题标题】：jQuery: Determine if jQuery object is root html tagjQuery：确定 jQuery 对象是否是根 html 标记
【发布时间】：2011-04-08 01:59:19
【问题描述】：

假设我正在编写一个 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> 标签？

【问题讨论】：

插件是否也应该使用<html> 元素？

标签： javascript jquery document

【解决方案1】：

$foo.is('html')

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

【讨论】：

【解决方案2】：

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

var $foo = $(this);

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

这是working fiddle。

【讨论】：

【解决方案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

};

【讨论】：

【解决方案4】：

这应该停止在HTML。

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

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

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

【讨论】：