मान लीजिए कि मैं एक तत्व को परिभाषित करता हूं
$foo = $('#foo');और फिर मैं फोन करता हूं
$foo.remove()किसी घटना से। मेरा प्रश्न यह है कि मैं कैसे जांचूं कि $ foo को DOM से निकाला गया है या नहीं? मुझे लगता है कि $foo.is(':hidden')काम करता है, लेकिन यह भी सच है अगर मैं सिर्फ कहा जाता है $foo.hide()।
जवाबों:
ऐशे ही:
if (!jQuery.contains(document, $foo[0])) {
//Element is detached
}
यह तब भी काम करेगा जब तत्व के माता-पिता में से एक को हटा दिया गया था (जिस स्थिति में तत्व स्वयं अभी भी माता-पिता होगा)।
$.contains(document.documentElement, $foo.get(0))है कि सबसे तेज़ तरीका है।
document.contains($foo[0])
यह करने के बारे में कैसे:
$element.parents('html').length > 0मुझे सिर्फ एक उत्तर का एहसास हुआ क्योंकि मैं अपना प्रश्न टाइप कर रहा था: कॉल करें
$foo.parent()यदि $f00डोम से हटा दिया गया है, तो $foo.parent().length === 0। अन्यथा, इसकी लंबाई कम से कम 1 होगी।
[संपादित करें: यह पूरी तरह से सही नहीं है, क्योंकि हटाए गए तत्व में अभी भी माता-पिता हो सकते हैं; उदाहरण के लिए, यदि आप एक को निकालते हैं, तो <ul>उसके प्रत्येक बच्चे के <li>पास अभी भी माता-पिता होंगे। इसके बजाय SLaks के उत्तर का उपयोग करें।
$fooउसे डोम से हटा दिया गया था। यदि इसे सफलतापूर्वक हटा दिया गया था, तो इसमें अब मूल तत्व नहीं होगा। इसलिए $foo.parent().length === 0इसका मतलब है कि निष्कासन सफल रहा।
चूंकि मैं एक टिप्पणी के रूप में प्रतिक्रिया करने में असमर्थ हूं (बहुत कम कर्म मुझे लगता है), यहां एक पूर्ण उत्तर है। ब्राउज़र समर्थन के लिए 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
एमडीएन से स्रोत
ध्यान दें:
मुझे यह तरीका पसंद आया। कोई jQuery और कोई DOM सर्च नहीं। पहले शीर्ष माता-पिता (पूर्वज) को खोजें। फिर देखें कि क्या यह दस्तावेज है।
function ancestor(HTMLobj){
while(HTMLobj.parentElement){HTMLobj=HTMLobj.parentElement}
return HTMLobj;
}
function inTheDOM(obj){
return ancestor(obj)===document.documentElement;
}
माता-पिता को पुनरावृत्त करने के बजाय आप केवल बाउंडिंग रेक्ट प्राप्त कर सकते हैं जो कि सभी शून्य है जब तत्व को डोम से अलग किया जाता है
function isInDOM(element) {
var rect=element.getBoundingClientRect();
return (rect.top || rect.bottom || rect.height || rect.width)?true:false;
}
यदि आप शून्य चौड़ाई और ऊंचाई तत्व के किनारे के मामले को शून्य से ऊपर और शून्य छोड़ना चाहते हैं, तो आप दस्तावेज़ तक माता-पिता को पुन: जाँच कर दोहरा सकते हैं।
display: noneकोई सीमा नहीं है या तो
पेरो की टिप्पणी से सहमत हैं। इसे इस तरह भी किया जा सकता है:
$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)...:?
$foo, और यह जांचने के लिए कि क्या पुन: क्वेरी किसी भी तत्व से मेल खाती है, कई परिदृश्यों में समस्या का एक व्यवहार्य समाधान लगता है। यह कुछ अन्य समाधानों की तुलना में जल्दी भी हो सकता है क्योंकि jQuery और ब्राउज़र दोनों कुछ चयनकर्ताओं (जैसे आईडी द्वारा) का अनुकूलन करते हैं।
$foo.closest(document.documentElement)तेज है (अगर किसी को भी jsperf.com/jquery-element-in-dom की परवाह है )