如何檢查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.