检测 jQuery 对象是否在页面上答案

【问题标题】：Detect if a jQuery object is on the page or not检测 jQuery 对象是否在页面上
【发布时间】：2011-03-25 03:37:19
【问题描述】：

给定一个 jQuery 对象，$j，我需要知道它是否代表页面上已经存在的东西，或者它是否是尚未放在页面上的东西。例如，如果我有这个：

$j = $('#id-of-something-already-on-the-page');

或

$j = $('<p>Where is pancake house?</p>').appendTo($('#this-is-already-there'));

然后我在页面上有东西，我不需要把它放在页面上。但是，如果我只有这个：

$j = $("<p>I'll cook you some eggs, Margie.</p>");

然后我需要在页面上之前附加它。

问题是如何询问$j 是否在页面上？我知道有两种方法可以很好地工作：

查看它是否有父节点：$j.parent().length > 0 表示它在页面上。
查看它是否有有效的索引：$j.index() > -1 表示它在页面上。

如果$j 是html 或者可能是body，我可以看到第一个失败；我很高兴忽略这两个病态病例。我想不出第二种方法会失败的任何方式。

是否有一种标准技术来询问 jQuery 对象是否在页面上？我不在乎 $j 是否可见。

【问题讨论】：

$j 可能有父母，但不在您知道的文档中...
另一个可能的测试：$j.closest('body').size()>0
@drachenstern：说得好。提出问题最好的部分是让某人指出明显的问题。同样的问题大概也适用于索引方法，因为他们正在检查类似的事情。
@Michael：在某些病理情况下，这种“超级父母”方法可能会遇到与仅检查 $j.parent().length 相同的问题，不是吗？ OTOH，如果有人试图将身体放入身体中，他们可能应该受到一些痛苦。
天哪，mu 问了第二个问题！ :p

标签： jquery dom

【解决方案1】：

就我个人而言，我会从页面中您知道是的元素开始，例如<html> 或<body>，然后使用.has()：

if ($('html').has($j).length)
{
    // $j is in the page
}

这甚至适用于您提到的两种病理情况。检查.length 是more idiomatic 而不是.size()。也没有理由检查返回的值是否为> 0。 length 属性将始终为非负整数，因此足以检查值的真实性。

【讨论】：

> 0 有一个很好的理由，那就是可读性。但是，额外的按键可能不值得，尤其是当大多数 javascript 编码人员在没有它的情况下也能理解其含义时。
我有点担心这个在大页面上的重量。但是 +1 是肯定的。

【解决方案2】：

我可能只是检查元素是否可以到达 body 元素：

$j.closest('body').size()>0

正如您在其他 cmets 中所指出的，在您处理额外的正文元素的某些特殊情况下，这会失败。如果你真的想检测这些情况，我想你可以检查一下你是否有多个 $(body) 元素，但我怀疑这种极端情况很快就会失控。

这个“可能附加到页面”检查也可以提交给bona-fide jQuery selector：

$.expr[':'].isProbablyAttached = function(obj){

    return $(obj).closest('body').size()>0;
};

// Usage:
$('.someClasses:isProbablyAttached').doSomething();

【讨论】：

我以前用过$.expr，但我现在只需要在一个地方使用它，所以我认为我不需要那么花哨。然而。
@Michael @mu 为什么不closest('html')？
既然可以使用.length，为什么还要使用.size()>0？ docs.jquery.com/…
@Matt：我用过.length，我想我从来没有用过.size()，除了个人喜好等等。
不用担心——他的解决方案更好（+1）

【解决方案3】：

使用 jQuery（至少使用 1.7.1 版）$('html').parent() 返回一个非空数组 ([#document])：

$j = $("<p>I'll cook you some eggs, Margie.</p>");
$j.parent().length === 0
$('html').parent().length === 1
$('body').parent().length === 1

所以'mu is too short'的注释不是问题：

如果 $j 是 html 或可能是正文，我可以看到第一个失败；我很高兴忽略这两个病态病例。我想不出第二种方法会失败的任何方式。

【讨论】：

【解决方案4】：

jQuery 对象代表 html 元素的集合。

选择后：$j = $('#id-of-something-already-on-the-page');

您所要做的就是检查 $j.length。如果是 1，则页面上有一项。

【讨论】：

不正确。如果我分离节点并将其存储在变量中，它仍然作为变量存在。如果我稍后测试该变量以查看是否某些代码将其重新插入到 DOM 中（想想：传递引用而不是每次都重新过滤它，并分支语句以执行各种操作，例如分离或包装），那么它可能会也可能不会在 DOM 中。如果您正在编写一个传递对节点的引用的函数，您不能总是知道 id 将是什么。另外：上下文查询。
或者如果我有 $j = $("<p>I'll cook you some eggs, Margie.</p>") 然后是 $j.length == 1 但该段落不在页面上，直到我 $('body').append($j)（或类似的东西）将其插入 DOM。