ฉันจะรับพาเรนต์ระดับที่ n ขององค์ประกอบใน jQuery ได้อย่างไร

เมื่อฉันต้องการได้รับเช่นผู้ปกครองระดับที่ 3 ขององค์ประกอบที่ฉันต้องเขียน$('#element').parent().parent().parent()มีวิธีที่เหมาะสมกว่านี้?

เนื่องจากparent ()ส่งคืนองค์ประกอบบรรพบุรุษที่เรียงลำดับจากใกล้เคียงกับองค์ประกอบด้านนอกมากที่สุดคุณสามารถโยงมันเข้ากับeq () :

$('#element').parents().eq(0);  // "Father".
$('#element').parents().eq(2);  // "Great-grandfather".

ขึ้นอยู่กับความต้องการของคุณหากคุณรู้ว่าสิ่งที่ผู้ปกครองของคุณกำลังมองหาคุณสามารถใช้ตัวเลือก. parents ()

EG: http://jsfiddle.net/HenryGarle/Kyp5g/2/

<div id="One">
    <div id="Two">
        <div id="Three">
            <div id="Four">

            </div>
        </div>
    </div>
</div>


var top = $("#Four").parents("#One");

alert($(top).html());

ตัวอย่างการใช้ดัชนี:

//First parent - 2 levels up from #Four
// I.e Selects div#One
var topTwo = $("#Four").parents().eq(2);

alert($(topTwo ).html());

คุณสามารถให้ id หรือคลาสของผู้ปกครองเป้าหมาย (เช่น myParent) และอ้างอิงด้วย $('#element').parents(".myParent")

วิธีที่เร็วกว่าคือการใช้จาวาสคริปต์โดยตรงเช่น

var parent = $(innerdiv.get(0).parentNode.parentNode.parentNode);

สิ่งนี้ทำงานบนเบราว์เซอร์ของฉันเร็วกว่าการโยง.parent()สายjQuery อย่างมีนัยสำคัญ

ดู: http://jsperf.com/jquery-get-3rd-level-parent

ไม่พบคำตอบใด ๆ ที่ใช้closest() และฉันคิดว่ามันเป็นคำตอบที่ง่ายที่สุดเมื่อคุณไม่ทราบว่ามีองค์ประกอบที่จำเป็นในระดับใดดังนั้นโพสต์คำตอบ:
คุณสามารถใช้closest()ฟังก์ชั่นร่วมกับตัวเลือกเพื่อให้ได้องค์ประกอบแรกที่ตรงกัน เมื่อเคลื่อนที่ขึ้นจากองค์ประกอบ:

('#element').closest('div')    // returns the innermost 'div' in its parents
('#element').closest('.container')    // returns innermost element with 'container' class among parents
('#element').closest('#foo')    // returns the closest parent with id 'foo'

มันง่ายมาก เพียงแค่ใช้

$(selector).parents().eq(0); 

โดยที่ 0 คือระดับพาเรนต์ (0 คือพาเรนต์ 1 คือพาเรนต์ของพาเรนต์เป็นต้น)

เพียงเพิ่ม:eq()ตัวเลือกดังนี้:

$("#element").parents(":eq(2)")

คุณเพียงแค่ระบุดัชนีที่ผู้ปกครอง: 0 สำหรับผู้ปกครองทันที 1 สำหรับผู้ปกครอง ...

หากคุณวางแผนที่จะใช้ฟังก์ชันการทำงานนี้อีกครั้งทางออกที่ดีที่สุดคือการสร้างปลั๊กอิน jQuery:

(function($){
$.fn.nthParent = function(n){
  var $p = $(this);
  while ( n-- >= 0 )
  {
    $p = $p.parent();
  }
  return $p;
};
}(jQuery));

แน่นอนคุณอาจต้องการขยายเพื่อให้ตัวเลือกเพิ่มเติมและสิ่งอื่น ๆ

หนึ่งหมายเหตุ: นี้ใช้เป็น0ดัชนีที่ใช้สำหรับพ่อแม่ผู้ปกครองจึงเป็นเช่นเดียวกับการเรียกnthParent(0) parent()หากคุณต้องการ1จัดทำดัชนีโดยใช้n-- > 0

หากคุณมี div ปกครองทั่วไปที่คุณสามารถใช้ parentsUntil () การเชื่อมโยง

เช่น: $('#element').parentsUntil('.commonClass')

ข้อได้เปรียบคือคุณไม่จำเป็นต้องจำจำนวนการสร้างระหว่างองค์ประกอบนี้กับพาเรนต์ทั่วไป (กำหนดโดย Commonclass)

คุณยังสามารถใช้:

$(this).ancestors().eq(n) 

เช่น: $(this).ancestors().eq(2)-> thisแม่ของผู้ปกครองของ

คุณสามารถใช้สิ่งนี้:

(function($) {
    $.fn.parentNth = function(n) {
        var el = $(this);
        for(var i = 0; i < n; i++)
            el = el.parent();

        return el;
    };
})(jQuery);

alert($("#foo").parentNth(2).attr("id"));

http://jsfiddle.net/Xeon06/AsNUu/

ใช้ eq ดูเหมือนจะคว้า DOM แบบไดนามิกในขณะที่ใช้. parent (). parent () ดูเหมือนจะคว้า DOM ที่ถูกโหลดครั้งแรก (ถ้าเป็นไปได้)

ฉันใช้พวกเขาทั้งสองในองค์ประกอบที่มีชั้นเรียนนำไปใช้กับ onmouseover eq แสดงคลาสในขณะที่. parent (). parent () ไม่

ในฐานะผู้ปกครอง ()ส่งคืนรายการสิ่งนี้ก็ใช้งานได้เช่นกัน

$('#element').parents()[3];