[jquery] 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 소스
노트 :
답변
나는이 접근법을 좋아했다. jQuery와 DOM 검색이 없습니다. 먼저 상위 부모 (조상)를 찾으십시오. 그런 다음 documentElement인지 확인하십시오.
function ancestor(HTMLobj){
while(HTMLobj.parentElement){HTMLobj=HTMLobj.parentElement}
return HTMLobj;
}
function inTheDOM(obj){
return ancestor(obj)===document.documentElement;
}
답변
부모를 반복하는 대신 요소가 dom에서 분리 될 때 경계 0을 얻을 수 있습니다.
function isInDOM(element) {
var rect=element.getBoundingClientRect();
return (rect.top || rect.bottom || rect.height || rect.width)?true:false;
}
너비가 0 인 요소와 너비가 0 인 요소의 가장자리를 0에서 왼쪽으로 처리하려면 부모가 문서까지 반복하여 두 번 확인할 수 있습니다.