Как проверить, находится ли элемент jQuery в DOM?

Скажем, что я определяю элемент

$foo = $('#foo');

а затем я вызываю

$foo.remove()

из какого-либо события. Мой вопрос в том, как проверить, удалено ли $foo из DOM или нет? Я обнаружил, что $foo.is(':hidden') работает, но это, конечно же, вернет true, если я просто назову $foo.hide().

Ответ 1

Вот так:

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

Это будет работать, если один из родителей элементов был удален (в этом случае сам элемент будет по-прежнему иметь родителя).

Ответ 2

Как это сделать:

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

Ответ 3

Так как я не могу ответить в качестве комментария (слишком низкая карма, я думаю), вот полный ответ. Самый быстрый способ - легко развернуть проверку 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]).

Ответ 4

Я только что понял ответ, когда я печатал свой вопрос: Call

$foo.parent()

Если $f00 было удалено из DOM, тогда $foo.parent().length === 0. В противном случае его длина будет не менее 1.

[Изменить: это не совсем правильно, потому что удаленный элемент все еще может иметь родителя; например, если вы удалите <ul>, каждый из его дочерних <li> будет по-прежнему иметь родителя. Вместо этого используйте ответ SLaks.

Ответ 5

Согласитесь с комментарием Перро. Это также можно сделать следующим образом:

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

Ответ 6

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

Ответ 7

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

Ответ 8

Мне понравился этот подход. Нет jQuery и нет поиска DOM. Сначала найдите главного родителя (предка). Затем посмотрите, является ли это элементом documentElement.

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

Ответ 9

Вероятно, самый перформативный способ:

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() для элементов.

Ответ 10

Почему не просто: if( $('#foo').length === 0)...?