Bir jQuery öğesinin DOM'da olup olmadığını nasıl kontrol ederim?

Diyelim ki bir eleman tanımladım

$foo = $('#foo');

ve sonra ararım

$foo.remove()

bazı olaylardan. Sorum şu, $ foo'nun DOM'dan kaldırılıp kaldırılmadığını nasıl kontrol ederim? Bunun $foo.is(':hidden')işe yaradığını buldum , ancak sadece ararsam bu da tabii ki doğru olur $foo.hide().

Bunun gibi:

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

Bu, öğenin üst öğelerinden biri kaldırılsa bile çalışacaktır (bu durumda öğenin kendisinin de bir üst öğesi olacaktır).

Bunu yapmaya ne dersin:

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

Yorum olarak yanıt veremediğim için (sanırım çok düşük karma), işte tam bir yanıt. En hızlı yol, tarayıcı desteği için jQuery kontrolünü açmak ve sabit faktörleri minimuma indirmektir.

Burada da görüldüğü gibi - http://jsperf.com/jquery-element-in-dom/28 - kod şöyle görünecektir:

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

Bu anlamsal olarak jQuery.contains'e (document.documentElement, elt [0]) eşdeğerdir.

Sorumu yazarken bir cevabın farkına vardım: Ara

$foo.parent()

Eğer $f00o zaman, DOM kaldırıldı $foo.parent().length === 0. Aksi takdirde uzunluğu en az 1 olacaktır.

[Düzenleme: Bu tamamen doğru değildir, çünkü kaldırılan bir öğenin hala bir ebeveyni olabilir; örneğin, a'yı kaldırırsanız <ul>, alt <li>öğelerinin her birinin hala bir ebeveyni olacaktır. Bunun yerine SLaks'ın cevabını kullanın.

Muhtemelen en performanslı yol şudur:

document.contains(node); // boolean

Bu aynı zamanda jQuery ile de çalışır:

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

MDN'den kaynak

Not:

• Internet Explorer yalnızca contains()öğeleri destekler .

Bu yaklaşımı beğendim. JQuery ve DOM araması yok. Önce en üstteki ebeveyni (atayı) bulun. Sonra bunun documentElement olup olmadığına bakın.

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

Ebeveynleri yinelemek yerine, öğe dom'dan ayrıldığında tümü sıfır olan sınırlayıcı rect'i elde edebilirsiniz.

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

Sıfır genişlik ve yükseklik öğesinin sıfır üst ve sıfır soldaki kenar durumunu işlemek istiyorsanız, belgeye kadar üst öğeleri yineleyerek iki kez kontrol edebilirsiniz. gövde

Perro'nun yorumuna katılıyorum. Şu şekilde de yapılabilir:

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

Neden sadece: if( $('#foo').length === 0)...?

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