Jak sprawdzić, czy element jQuery znajduje się w DOM?

Question

Powiedzmy, że określenie elementu

$foo = $('#foo'); 

a potem zadzwonić

$foo.remove() 

od jakiegoś zdarzenia. Moje pytanie brzmi: jak mogę sprawdzić, czy $ foo zostało usunięte z DOM, czy nie? Zauważyłem, że działa $foo.is(':hidden'), ale to oczywiście również zwróci true, jeśli po prostu zadzwoniłem pod numer $foo.hide().

Answer 1

Jak to:

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

ten będzie nadal działać, jeśli jeden z rodziców elementu została usunięta (w tym przypadku sam element będzie nadal mieć rodzica).

Answer 2

Właśnie uświadomiłem sobie odpowiedź jak pisałem moje pytanie: Call

$foo.parent() 

Jeśli $f00 została usunięta z DOM, następnie $foo.parent().length === 0. W przeciwnym razie jego długość będzie wynosić co najmniej 1.

[Edytuj: nie jest to całkowicie poprawne, ponieważ usunięty element może nadal mieć element nadrzędny; na przykład, jeśli usuniesz <ul>, każde z jego potomków będzie nadal mieć rodzica. Zamiast tego użyj odpowiedzi SLaks.

Answer 3

Jak ow ten sposób:

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

Answer 4

Zgadzam się z komentarzem Perro za. Można również zrobić tak:

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

Answer 5

Ponieważ jestem w stanie odpowiedzieć w komentarzu (zbyt niska karma chyba), tutaj jest pełna odpowiedź. Najszybszym sposobem jest łatwe rozwinięcie sprawdzania jQuery dla obsługi przeglądarki i zredukowanie stałych współczynników do minimum.

Jak widać również tu - http://jsperf.com/jquery-element-in-dom/28 - kod powinien wyglądać następująco:

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

to semantycznie równoważne jQuery.contains (document.documentElement, elt [0]).

Answer 6

Dlaczego nie tylko: 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

lubiłem tego podejścia. Bez jQuery i bez wyszukiwania DOM. Najpierw znajdź najlepszego rodzica (przodka). Następnie sprawdź, czy to jest documentElement.

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

Answer 10

Prawdopodobnie najbardziej performatywna sposobem jest:

document.contains(node); // boolean 

To również działa z jQuery:

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

Źródło z MDN

Uwaga:

• Internet Explorer only supports contains() for elements.