Bagaimana cara saya mendapatkan induk level ke-n dari elemen di jQuery?

Ketika saya ingin mendapatkan, misalnya, induk elemen ke-3 dari elemen yang harus saya tulis $('#element').parent().parent().parent()Apakah ada metode yang lebih optimal untuk ini?

Karena orang tua () mengembalikan elemen leluhur yang dipesan dari yang terdekat ke yang luar, Anda dapat mengaitkannya menjadi eq () :

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

Bergantung pada kebutuhan Anda, jika Anda tahu orang tua apa yang Anda cari, Anda dapat menggunakan pemilih .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());

Contoh menggunakan indeks:

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

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

Anda bisa memberikan id atau kelas orang tua target (misalnya myParent) dan referensi ada bersama $('#element').parents(".myParent")

Cara yang lebih cepat adalah menggunakan javascript secara langsung, mis.

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

Ini berjalan secara signifikan lebih cepat di browser saya daripada chaining .parent()panggilan jQuery .

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

Tidak menemukan jawaban yang menggunakan closest() dan saya pikir itu adalah jawaban yang paling sederhana ketika Anda tidak tahu berapa level dari elemen yang diperlukan, jadi memposting jawaban:
Anda dapat menggunakan closest()fungsi yang dikombinasikan dengan penyeleksi untuk mendapatkan elemen pertama yang cocok dengan saat melintasi ke atas dari elemen:

('#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'

Itu mudah. Gunakan saja

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

di mana 0 adalah level orangtua (0 adalah orangtua, 1 adalah orangtua orangtua dll)

Cukup tambahkan :eq()pemilih seperti ini:

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

Anda cukup menentukan indeks induk mana: 0 untuk induk langsung, 1 untuk grand-orangtua, ...

Jika Anda berencana menggunakan kembali fungsi ini, solusi optimal adalah membuat plugin jQuery:

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

Tentu saja, Anda mungkin ingin memperpanjangnya untuk memungkinkan pemilih opsional dan hal-hal lain semacam itu.

Satu catatan: ini menggunakan 0indeks berbasis untuk orang tua, jadi nthParent(0)sama dengan menelepon parent(). Jika Anda lebih suka 1pengindeksan berbasis, gunakann-- > 0

Jika Anda memiliki div induk yang sama Anda dapat menggunakan parentsUntil () Link

misalnya: $('#element').parentsUntil('.commonClass')

Keuntungannya adalah Anda tidak perlu mengingat berapa generasi yang ada antara elemen ini dan orang tua yang sama (didefinisikan oleh commonclass).

Anda juga bisa menggunakan :

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

mis: $(this).ancestors().eq(2)-> induk dari induk this.

Anda dapat menggunakan sesuatu seperti ini:

(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/

menggunakan eq muncul untuk mengambil DOM dinamis sedangkan menggunakan .parent (). parent () muncul untuk mengambil DOM yang awalnya dimuat (jika itu bahkan mungkin).

Saya menggunakan keduanya pada elemen yang kelasnya menerapkannya pada onmouseover. eq memperlihatkan kelas sementara .parent (). parent () tidak.

Saat orang tua () mengembalikan daftar, ini juga berfungsi

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