Question

假设我定义了一个元素

$foo = $('#foo');

然后我打电话

$foo.remove()

来自某个事件。我的问题是，如何检查$ foo是否已从DOM中删除？我发现$foo.is(':hidden')有效，但如果我只调用$foo.hide()，那当然也会返回。

Answer 1

像这样：

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

如果删除了一个元素的父元素（在这种情况下元素本身仍然具有父元素），这仍然有效。

Answer 2

这样做：

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

Answer 3

当我输入我的问题时，我才意识到答案：致电

$foo.parent()

如果已从DOM中删除$f00，则$foo.parent().length === 0。否则，其长度至少为1。

[编辑：这不完全正确，因为删除的元素仍然可以拥有父元素;例如，如果您删除<ul>，则其每个子<li>仍将拥有父级。请改用SLaks的答案。

Answer 4

由于我无法作为评论作出回应（我认为这个假人太低），这是一个完整的回复。最快的方法是轻松展开浏览器支持的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 5

可能最具表现力的方式是：

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.

Answer 6

我喜欢这种方法。没有jQuery，也没有DOM搜索。首先找到顶级父（祖先）。然后看看是否是documentElement。

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

Answer 7

同意Perro的评论。它也可以这样做：

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

Answer 8

为什么不呢：if( $('#foo').length === 0)...？

Answer 9

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

Answer 10

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 11

而不是迭代父级，你可以获得当元素与dom分离时全部为零的边界矩形

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

如果你想在零顶部和零左边处理零宽度和高度元素的边缘情况，你可以通过迭代父级直到document.body

进行双重检查。

如何检查jQuery元素是否在DOM中？

11 个答案: