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?
javascript
jquery
parent
Artur Keyan
sumber
sumber
Jawaban:
Karena orang tua () mengembalikan elemen leluhur yang dipesan dari yang terdekat ke yang luar, Anda dapat mengaitkannya menjadi eq () :
sumber
$('.element').first().parents().eq(num);
[2]
akan mengembalikan elemen DOM yang mendasarinya, usingeq(2)
akan mengembalikan objek jQuery.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/
Contoh menggunakan indeks:
sumber
Anda bisa memberikan id atau kelas orang tua target (misalnya myParent) dan referensi ada bersama
$('#element').parents(".myParent")
sumber
Cara yang lebih cepat adalah menggunakan javascript secara langsung, mis.
Ini berjalan secara signifikan lebih cepat di browser saya daripada chaining
.parent()
panggilan jQuery .Lihat: http://jsperf.com/jquery-get-3rd-level-parent
sumber
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:sumber
Itu mudah. Gunakan saja
di mana 0 adalah level orangtua (0 adalah orangtua, 1 adalah orangtua orangtua dll)
sumber
Cukup tambahkan
:eq()
pemilih seperti ini:Anda cukup menentukan indeks induk mana: 0 untuk induk langsung, 1 untuk grand-orangtua, ...
sumber
Jika Anda berencana menggunakan kembali fungsi ini, solusi optimal adalah membuat plugin jQuery:
Tentu saja, Anda mungkin ingin memperpanjangnya untuk memungkinkan pemilih opsional dan hal-hal lain semacam itu.
Satu catatan: ini menggunakan
0
indeks berbasis untuk orang tua, jadinthParent(0)
sama dengan meneleponparent()
. Jika Anda lebih suka1
pengindeksan berbasis, gunakann-- > 0
sumber
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 bersyaratnthParent(-2)
? Contoh Anda rusak.(function($) { $.fn.nthParent = function(n) { return $(this).parents().eq(n); }; }(jQuery));
parents
yang akan salah untuk pilihan dengan lebih dari satu elemen.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.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).
sumber
Anda juga bisa menggunakan :
mis:
$(this).ancestors().eq(2)
-> induk dari indukthis
.sumber
Anda dapat menggunakan sesuatu seperti ini:
http://jsfiddle.net/Xeon06/AsNUu/
sumber
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
Saat orang tua () mengembalikan daftar, ini juga berfungsi
sumber