ฉันจะตรวจสอบว่าองค์ประกอบ 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

[แก้ไข: สิ่งนี้ไม่ถูกต้องทั้งหมดเนื่องจากองค์ประกอบที่ลบออกยังคงมีแม่ได้ ตัวอย่างเช่นหากคุณลบ a <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.contain (document.documentElement, elt [0])

อาจเป็นวิธีที่ performative ที่สุดคือ:

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

บันทึก:

• Internet Explorer รองรับเฉพาะcontains()องค์ประกอบ

ฉันชอบวิธีนี้ ไม่มี jQuery และไม่มีการค้นหา DOM ขั้นแรกให้ค้นหาผู้ปกครองชั้นนำ (บรรพบุรุษ) จากนั้นดูว่านั่นคือ documentElement หรือไม่

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

แทนการทำซ้ำผู้ปกครองคุณสามารถรับ rect bounding ซึ่งเป็นศูนย์ทั้งหมดเมื่อองค์ประกอบถูกแยกจาก dom

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

ถ้าคุณต้องการที่จะจัดการกับกรณีขอบขององค์ประกอบความกว้างและความสูงเป็นศูนย์ที่ด้านบนเป็นศูนย์และซ้ายเป็นศูนย์คุณสามารถตรวจสอบซ้ำโดยผู้ปกครองซ้ำจนถึงเอกสาร

เห็นด้วยกับความคิดเห็นของ Perro มันสามารถทำได้เช่นนี้

$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)...?

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