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

假设我定义了一个元素

$foo = $('#foo');

然后我打电话

$foo.remove()

从某个事件。我的问题是，如何检查$ foo是否已从DOM中删除？我已经找到了$foo.is(':hidden')可行的方法，但是如果我仅致电，那当然也将返回true $foo.hide()。

像这样：

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

如果元素的父元素之一被删除（在这种情况下，元素本身仍将具有父元素），则此方法仍然有效。

如何做到这一点：

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

在输入问题时，我刚刚意识到一个答案：打电话

$foo.parent()

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

[编辑：这并不完全正确，因为删除的元素仍然可以具有父元素；例如，如果您删除，则<ul>其每个子级<li>仍将有一个父级。请改用SLaks的答案。

由于我无法以评论的形式回应（我认为业报太低），因此，这里是完整的答复。最快的方法是轻松展开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]）。

可能最有效的方式是：

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()元素。

我喜欢这种方法。没有jQuery，也没有DOM搜索。首先找到顶级父母（祖先）。然后查看是否为documentElement。

function ancestor(HTMLobj){
  while(HTMLobj.parentElement){HTMLobj=HTMLobj.parentElement}
  return HTMLobj;
}
function inTheDOM(obj){
  return ancestor(obj)===document.documentElement;
}

而不是迭代父母，您只需获取元素dom与dom分离时的边界rect即可为全零。

function isInDOM(element) {
    var rect=element.getBoundingClientRect();
    return (rect.top || rect.bottom || rect.height || rect.width)?true:false;
}

如果要处理宽度零高度元素为零且顶部零，元素零为零的边缘情况，则可以通过迭代父级直到document.body来进行仔细检查。

同意佩罗的评论。也可以这样完成：

$foo.parents().last().is(document.documentElement);

jQuery.fn.isInDOM = function () {
   if (this.length == 1) {
      var element = this.get(0);
      var rect = element.getBoundingClientRect();
      if (rect.top + rect.bottom + rect.width + rect.height + rect.left + rect.right == 0)
         return false;
      return true;
   }
   return false;
};

为什么不只是： if( $('#foo').length === 0)...？

if($foo.nodeType ){ element is node type}