blocks|key|1003033|text|如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1003034|if+(!jQuery.contains(document,+$foo[0]))+{
++++//Element+is+detached
}|code-block|syntax|javascript|1003035|如果删除了元素的父元素之一(在这种情况下，元素本身仍然有父元素)，这仍然有效。|1003036|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Like this:

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

This will still work if one of the element's parents was removed (in which case the element itself will still have a parent).

blocks|key|1003087|text|这样做如何：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1003088|$element.parents('html').length+>+0|code-block|syntax|javascript|1003089|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

How about doing this:

<pre><code>$element.parents('html').length &gt; 0
</code></pre>

blocks|key|1003136|text|同意Perro的评论。也可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1003137|$foo.parents().last().is(document.documentElement);|code-block|syntax|javascript|1003138|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Agree with Perro's comment. It can also be done like this:

<pre><code>$foo.parents().last().is(document.documentElement);
</code></pre>

blocks|key|1217566|text|由于我无法回复评论(我想是因果报应太低)，这里有一个完整的回复。最快的方法是轻松地展开浏览器支持的jQuery检查，并将常量因子减少到最小。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1217567|也可以在这里看到-+http://jsperf.com/jquery-element-in-dom/28+-代码将如下所示：|offset|length|1217568|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+%7C%7C+find(elt.parentNode));
+++++++++++}),+function(elt)+{+return+find(elt);+});

++return+function(elt)+{
++++return+!!(elt+&&+((elt+=+elt.parent)+==+docElt+%7C%7C+contains(elt)));
++};
})(jQuery);|code-block|syntax|javascript|1217569|这在语义上等同于jQuery.contains(document.documentElement，elt)。|1217570|entityMap|0|LINK|mutability|MUTABLE|url|http://jsperf.com/jquery-element-in-dom/28^0|0|A|16|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@$D|W|E|X|1|Y]]|A|$]]|$1|F|3|G|5|H|7|Z|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|10|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

Since I'm unable to respond as a comment (too low karma I guess), here's a full reply. The fastest way is easily to unroll the jQuery check for browser support and to shave the constant factors to minimum.

As seen also here - <a href="http://jsperf.com/jquery-element-in-dom/28" rel="noreferrer">http://jsperf.com/jquery-element-in-dom/28</a> - the code would look like this:

<pre><code>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) &amp; 16;
 } :
 ((find = function(elt) {
 return elt &amp;&amp; (elt == docElt || find(elt.parentNode));
 }), function(elt) { return find(elt); });

 return function(elt) {
 return !!(elt &amp;&amp; ((elt = elt.parent) == docElt || contains(elt)));
 };
})(jQuery);
</code></pre>

This is semantically equivalent to jQuery.contains(document.documentElement, elt[0]).

blocks|key|1217600|text|为什么不只是：if(+$('#foo').length+===+0)...？|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1217601|entityMap^0|7|U|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

Why not just: <code>if( $('#foo').length === 0)...</code> ?

blocks|key|1217610|text|if($foo.nodeType+){+element+is+node+type}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1217611|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>if($foo.nodeType ){ element is node type}
</code></pre>

blocks|key|1003281|text|jQuery.fn.isInDOM+=+function+()+{
+++if+(this.length+==+1)+{
++++++var+element+=+this.get(0);
++++++var+rect+=+element.getBoundingClientRect();
++++++if+(rect.top+%2B+rect.bottom+%2B+rect.width+%2B+rect.height+%2B+rect.left+%2B+rect.right+==+0)
+++++++++return+false;
++++++return+true;
+++}
+++return+false;
};|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1003282|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>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;
};
</code></pre>

blocks|key|1003350|text|我喜欢这种方法。没有jQuery和DOM搜索。首先找到顶层的父级(祖先)。然后看看这是不是documentElement。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1003351|function+ancestor(HTMLobj){
++while(HTMLobj.parentElement){HTMLobj=HTMLobj.parentElement}
++return+HTMLobj;
}
function+inTheDOM(obj){
++return+ancestor(obj)===document.documentElement;
}|code-block|syntax|javascript|1003352|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I liked this approach. No jQuery and no DOM search. First find the top parent (ancestor). Then see if that is the documentElement.

<pre><code>function ancestor(HTMLobj){
 while(HTMLobj.parentElement){HTMLobj=HTMLobj.parentElement}
 return HTMLobj;
}
function inTheDOM(obj){
 return ancestor(obj)===document.documentElement;
}
</code></pre>

blocks|key|1217732|text|您可以直接获得边界rect，而不是迭代父元素，当元素从dom分离时，边界rect是全零的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1217733|function+isInDOM(element)+{
++++var+rect=element.getBoundingClientRect();
++++return+(rect.top+%7C%7C+rect.bottom+%7C%7C+rect.height+%7C%7C+rect.width)?true:false;
}|code-block|syntax|javascript|1217734|如果想要处理零顶零左零的宽度和高度为零的元素的边缘情况，可以通过迭代父元素直到document.body|1217735|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

instead of iterating parents you can just get the bounding rect which is all zeros when the element is detached from dom

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

if you want to handle the edge case of a zero width and height element at zero top and zero left you can double check by iterating parents till the document.body

Let's say that I define an element

<pre><code>$foo = $('#foo');
</code></pre>

and then I call

<pre><code>$foo.remove()
</code></pre>

from some event. My question is, how do I check whether $foo has been removed from the DOM or not? I've found that <code>$foo.is(':hidden')</code> works, but that would of course also return true if I merely called <code>$foo.hide()</code>.

How do I check whether a jQuery element is in the DOM?

jQuery

假设我定义了一个元素$foo = $('#foo');然后我会打电话给$foo.remove()从某个事件中。我的问题是，如何检查$foo是否已从DOM中删除？我发现$foo.is(':hidden')可以工作，但如果我只调用$foo.hide()，当然也会返回true。

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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