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

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 đã bị xóa khỏi DOM hay chưa? Tôi đã tìm thấy nó $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 $foo.hide().

Như thế này:

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

Điều này sẽ vẫn hoạt động nếu một trong các phần tử cha mẹ của phần tử bị xóa (trong trường hợp đó phần tử vẫn sẽ có phần tử cha mẹ).

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

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

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

$foo.parent()

Nếu $f00đã bị xóa khỏi DOM, thì $foo.parent().length === 0. Nếu không, chiều dài của nó sẽ ít nhất là 1.

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

Vì tôi không thể trả lời như một bình luận (tôi đoán là nghiệp quá thấp), đây là một câu trả lời đầy đủ. Cách nhanh nhất là dễ dàng hủy đăng ký kiểm tra jQuery để hỗ trợ trình duyệt và cạo các yếu tố không đổi đến mức tối thiểu.

Như đã thấy ở đâ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);

Điều này tương đương về mặt ngữ nghĩa với jQuery.contains (document.documentEuity, elt [0]).

Có lẽ cách hiệu quả nhất là:

document.contains(node); // boolean

Điều này cũng hoạt động 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

Ghi chú:

• Internet Explorer chỉ hỗ trợ contains()cho các yếu tố.

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

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

thay vì lặp đi lặp lại cha mẹ, bạn chỉ có thể nhận được trực tràng giới hạn là tất cả các số không khi phần tử được tách ra khỏi dom

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

nếu bạn muốn xử lý trường hợp cạnh của phần tử chiều rộng và chiều cao bằng 0 ở đỉnh 0 và 0 trái, bạn có thể kiểm tra lại bằng cách lặp lại cha mẹ cho đến tài liệu.

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

$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;
};

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

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