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

Question

比方说，我定义元素

$foo = $('#foo'); 

，然后我打电话

$foo.remove() 

一些事件。我的问题是，如何检查$ foo是否已从DOM中删除？我发现$foo.is(':hidden')作品，但这当然也返回true，如果我只是叫$foo.hide()。

Answer 1

像这样：

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

如果该元素的父母之一是删除（在这种情况下，元素本身仍然有一个父）这仍然可以工作。

Answer 2

我才意识到，我打字我的问题的答案：呼叫

$foo.parent() 

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

[编辑：这是不完全正确的，因为去除元件仍然可以有一个父;举例来说，如果你删除一个<ul>，它的每个子<li> S的仍将有一个父。改用SLaks的答案。

Answer 3

如何这样做：

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

Answer 4

同意佩罗的评论。它也可以这样做：

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

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]）。

Answer 6

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

Answer 7

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

Answer 8

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; 
}; 

Answer 9

我很喜欢这种方法。没有jQuery和没有DOM搜索。首先找到最高的父母（祖先）。然后看看这是否是documentElement。

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

Answer 10

可能是最表演方式是：

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 only supports contains() for elements.