Як перевірити, чи є елемент jQuery у DOM?

Скажімо, я визначаю елемент

$foo = $('#foo');

а потім дзвоню

$foo.remove()

від якоїсь події. Моє запитання полягає в тому, як я можу перевірити, чи було видалено $ foo з DOM чи ні? Я виявив, що це $foo.is(':hidden')працює, але це, звичайно, також повернеться правдою, якби я просто зателефонував $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 пошуку. Спочатку знайдіть верхнього батька (предка). Потім подивіться, чи це документElement.

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

замість ітерації батьків ви можете просто отримати обмежувальну пряму, яка є всіма нулями, коли елемент від'єднаний від dom

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

якщо ви хочете обробити край краю елемента нульової ширини та висоти в нульовому верхньому та нульовому лівому напрямку, ви можете двічі перевірити ітерацією батьків до документа.

Погодьтеся з коментарем Перро. Це також можна зробити так:

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