如何检查jQuery元素是否在DOM中？

Question

假设我定义了一个元素

$foo = $('#foo');

然后我打电话

$foo.remove()

从某些事件.我的问题是,如何检查$ foo是否已从DOM中删除？我发现它$foo.is(':hidden')有效,但如果我只是打电话,那当然也会成功$foo.hide().

Answer 1

像这样:

if (!jQuery.contains(document, $foo[0])) {
    //Element is detached
}

如果删除了元素的父元素之一(在这种情况下元素本身仍将具有父元素),这仍然有效.

Answer 2

这样做怎么样:

$element.parents('html').length > 0

Answer 3

也许最具表现力的方式是：

document.contains(node); // boolean

这也适用于 jQuery：

document.contains($element[0]); // var $element = $("#some-element")
document.contains(this[0]); // in contexts like $.each(), `this` is the jQ object

来源MDN

笔记：

• Internet Explorer 仅支持contains()元素。

Answer 4

当我输入我的问题时,我才意识到答案:打电话

$foo.parent()

如果$f00已从DOM中删除,那么$foo.parent().length === 0.否则,其长度至少为1.

[编辑:这不完全正确,因为删除的元素仍然可以拥有父元素; 例如,如果你删除a <ul>,它的每个子<li>节点仍然会有父节点.请改用SLaks的答案.

Answer 5

由于我无法作为评论做出回应（我猜是业力太低了），这是一个完整的回复。最快的方法是轻松展开 jQuery 检查以获取浏览器支持，并将常量因素降至最低。

如此处所示 - http://jsperf.com/jquery-element-in-dom/28 - 代码如下所示：

var isElementInDOM = (function($) {
  var docElt = document.documentElement, find,
      contains = docElt.contains ?
        function(elt) { return docElt.contains(elt); } :

        docElt.compareDocumentPosition ?
          function(elt) {
            return docElt.compareDocumentPosition(elt) & 16;
          } :
          ((find = function(elt) {
              return elt && (elt == docElt || find(elt.parentNode));
           }), function(elt) { return find(elt); });

  return function(elt) {
    return !!(elt && ((elt = elt.parent) == docElt || contains(elt)));
  };
})(jQuery);

这在语义上等同于 jQuery.contains(document.documentElement, elt[0])。