Làm cách nào để kiểm tra xem một phần tử jQuery có nằm trong DOM không?

Question

Hãy nói rằng tôi xác định một yếu tố

$foo = $('#foo'); 

và sau đó tôi gọi

$foo.remove() 

từ một số sự kiện. Câu hỏi của tôi là, làm cách nào để kiểm tra xem $ foo có bị xóa khỏi DOM hay không? Tôi đã tìm thấy rằng $foo.is(':hidden') hoạt động, nhưng điều đó tất nhiên cũng sẽ trở lại đúng nếu tôi chỉ gọi là $foo.hide().

Answer 1

Như thế này:

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

này sẽ vẫn làm việc nếu một trong cha mẹ của phần tử đã được gỡ bỏ (trong trường hợp các yếu tố bản thân vẫn sẽ có một mẹ).

Answer 2

Tôi chỉ nhận ra một câu trả lời khi tôi đang gõ câu hỏi của tôi: Gọi

$foo.parent() 

Nếu $f00 đã bị xóa khỏi DOM, sau đó $foo.parent().length === 0. Nếu không, độ dài của nó sẽ tối thiểu là 1.

[Chỉnh sửa: Điều này không hoàn toàn chính xác, vì phần tử đã xóa vẫn có thể có bố mẹ; ví dụ: nếu bạn xóa <ul>, mỗi đứa con của nó <li> s sẽ vẫn có cha mẹ. Sử dụng câu trả lời của SLaks để thay thế.

Answer 3

Làm thế nào về việc này:

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

Answer 4

Đồng ý với bình luận Perro của. Nó cũng có thể được thực hiện như thế này:

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

Answer 5

Vì tôi không thể trả lời làm nhận xét (quá thấp nghiệp), đây là câu trả lời đầy đủ. Cách nhanh nhất là dễ dàng để unroll kiểm tra jQuery cho hỗ trợ trình duyệt và để cạo các yếu tố liên tục đến mức tối thiểu.

Như đã thấy cũng ở đây - http://jsperf.com/jquery-element-in-dom/28 - mã sẽ trông như thế này:

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

Đây là ngữ nghĩa tương đương với jQuery.contains (document.documentElement, ELT [0]).

Answer 6

Tại sao không chỉ: if($('#foo').length === 0)...?

Answer 7

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

Answer 8

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 9

tôi thích phương pháp này. Không có jQuery và không có tìm kiếm DOM. Đầu tiên tìm cha mẹ hàng đầu (tổ tiên). Sau đó xem nếu đó là documentElement.

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

Answer 10

Có lẽ cách performative nhất là:

document.contains(node); // boolean 

này cũng làm việc với jQuery:

document.contains($element[0]); // var $element = $("#some-element") 
document.contains(this[0]); // in contexts like $.each(), `this` is the jQ object 

Nguồn từ MDN

Lưu ý:

• Internet Explorer only supports contains() for elements.