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

151

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?

Artur Keyan
sumber
2
Saya ingin memberikan hanya angka (Level) dan mendapatkan elemen, karena elemen saya mungkin tidak memiliki id atau nama teman
Artur Keyan
1
Jika Anda berencana menggunakan kembali fungsi ini, solusi optimal adalah membuat plugin jQuery.
zzzzBov
3
Lihat jsperf.com/jquery-get-3rd-level-parent untuk beberapa perbandingan kinerja
aēr
1
Alat bagus lainnya adalah fungsi ".closest ()". $ ('li.item'). paling dekat ('div') akan memberi Anda DIV yang merupakan leluhur terdekat dari li.item. Baik untuk ketika Anda tidak tahu berapa banyak level elemen, tetapi Anda tahu tagname / kelas / sesuatu yang lain.
Graham

Jawaban:

267

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".
Frédéric Hamidi
sumber
dapatkah saya menggunakan $ ('# element') ini. parents () [2]? atau harus dengan eq (2)
Artur Keyan
1
ini tidak akan berfungsi untuk beberapa pilihan elemen, cara yang lebih aman adalah:$('.element').first().parents().eq(num);
zzzzBov
6
@ Arthur, using [2]akan mengembalikan elemen DOM yang mendasarinya, using eq(2)akan mengembalikan objek jQuery.
Frédéric Hamidi
1
@zzzzBov, sangat benar, tetapi hanya akan ada satu elemen yang dipilih dalam kasus si penanya (karena ia cocok dengan id).
Frédéric Hamidi
Jika Anda melihat id "#element", itu hanya akan mengembalikan satu elemen karena itulah cara kerja pencarian ID, mereka mengembalikan elemen pertama dengan ID itu di dom. Jika di sisi lain Anda melakukan "div # element" atau pemilih kelas Anda akan benar.
Henry
29

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());
Henry
sumber
Saya sekarang dengan cara ini, tetapi saya ingin memberi level
Artur Keyan
3
Baca lebih lanjut jawabannya dan semua akan diungkapkan! (Saya sudah memberi Anda contoh level)
Henry
Ini bekerja dengan baik untuk semua jenis penyeleksi lainnya. Misalnya, jika Anda ingin daftar semua orang tua dan orang tua dari orang tua dengan kelas tertentu, ini akan mengembalikan mereka.
darksky
8

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

Joseph Marikle
sumber
Saya hanya ingin memberikan nomor dan mendapatkan elemen, karena elemen saya mungkin tidak memiliki id atau nama teman
Artur Keyan
6

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

ya
sumber
Dengan "secara signifikan lebih cepat", kami sedang melihat tentang urutan besarnya dalam hal perbedaan kecepatan (menjalankan jQuery 1.10.1 di Chrome 51). Implementasi yang sangat berguna jika Anda mencari kecepatan.
Iain Fraser
5

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'
Dane
sumber
3

Itu mudah. Gunakan saja

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

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

zatatatata
sumber
3

Cukup tambahkan :eq()pemilih seperti ini:

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

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

MBO
sumber
Cara ini adalah cara tercepat untuk menyelesaikan pekerjaan. Inilah patokan untuk membuktikannya: jsperf.com/jquery-get-element-s-nth-parent
java-man-script
3

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

zzzzBov
sumber
Saya pikir Anda akan menemukan bagian ini lebih cepat: var p = 1 + n; while (p--) { $p = $p.parent(); }dan JIKA Anda ingin mengubah ke 1 berbasis, Javascript menjadi "falsey" yang dapat Anda gunakan: while (n--) { $p = $p.parent();} menyimpan cek bersyarat
Mark Schultheiss
@ Mark Schultheiss, Ini bukan hanya tentang kecepatan, ini tentang keandalan juga. Apa yang terjadi pada fungsi Anda jika seseorang dengan bodohnya menelepon nthParent(-2)? Contoh Anda rusak.
zzzzBov
ATAU baru saja kembali(function($) { $.fn.nthParent = function(n) { return $(this).parents().eq(n); }; }(jQuery));
Mark Schultheiss
@ Mark Schultheiss, sekali lagi, keandalan. Fungsi saya mengembalikan nthParent untuk setiap elemen dalam pemilihan, fungsi Anda mengembalikan elemen ke-n dalam daftar parentsyang akan salah untuk pilihan dengan lebih dari satu elemen.
zzzzBov
true tentang -2, dan seperti pada contoh Anda menggunakan var p = n >? (1 + n):1; bukan akan mengembalikan orangtua pertama dalam kasus itu daripada "tidak ada" - atau di mana ia merusak loop dalam contoh saya. SO, mungkin seharusnya: (function($) { $.fn.nthParent = function(n) { var $p = $(this); if (!(n > -0)) { return $() }; var p = 1 + n; while (p--) { $p = $p.parent(); } return $p; }; }(jQuery)); jika Anda tidak ingin mengembalikan apa pun.
Mark Schultheiss
3

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

ashishyadaveee11
sumber
1

Anda juga bisa menggunakan :

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

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

Mouna Cheikhna
sumber
0

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/

Alex Turpin
sumber
1
Bukan downvoter, tapi ini mungkin solusi terburuk (yaitu tidak efisien) di sini.
zatatatata
0

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.


sumber
0

Saat orang tua () mengembalikan daftar, ini juga berfungsi

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