jQuery: Bagaimana cara mendapatkan anak tertentu dari orang tua?

92

Untuk memberikan contoh yang disederhanakan, saya memiliki blok berikut yang diulangi di halaman berkali-kali (ini dibuat secara dinamis):

<div class="box">
   <div class="something1"></div>
   <div class="something2">
      <a class="mylink">My link</a>
   </div>
</div>

Saat diklik, saya bisa membuka link induk dengan:

$(".mylink").click(function() {
   $(this).parents(".box").fadeOut("fast");
});

Namun ... Saya harus membahas salah <div class="something1">satu orang tua itu.

Pada dasarnya, dapatkah seseorang memberi tahu saya cara merujuk pada saudara tingkat yang lebih tinggi tanpa dapat merujuknya secara langsung? Sebut saja kakak. Referensi langsung ke nama kelas kakak laki-laki akan menyebabkan setiap contoh elemen di halaman memudar - yang bukan merupakan efek yang diinginkan.

Saya sudah mencoba:

parents(".box .something1") ... no luck.
parents(".box > .something1") ... no luck.
siblings() ... no luck.

Siapa saja? Terima kasih.

— Tom
sumber

Jawaban Anurag mungkin tidak tampak seperti yang benar -itu pasti membuat saya berhenti dan berpikir- tetapi menunjukkan kesalahan ketik yang mencolok dalam kode Anda yang menyebabkan pemilih Anda gagal. Selektor, di jQuery, .parent() tidak .parents()

— David mengatakan mengembalikan Monica

@ricebowl: Salah. api.jquery.com/parents

— SLaks

@ricebowl ... parent () akan memberi saya div sesuatu2, jadi saya butuh orang tua () untuk masuk ke kotak div.

— Tom

Ah; permintaan maaf saya. Umm ... Saya tidak tahu apakah yang terbaik adalah membiarkan ketidaktahuan saya terpampang, atau menghapus kesalahan agar tidak mengecewakan orang lain ... = | Namun, setidaknya saya telah mempelajari sesuatu yang berguna hari ini; itu intinya kan ..? =)

— David mengatakan mengembalikan Monica

1

@ricebowl, jangan khawatir, terima kasih telah berkontribusi.

— Tom

144

Memanggil .parents(".box .something1")akan mengembalikan semua elemen induk yang cocok dengan selektor .box .something. Dengan kata lain, ini akan mengembalikan elemen induk yang ada .something1dan berada di dalam .box.

Anda perlu mendapatkan anak dari orang tua terdekat, seperti ini:

$(this).closest('.box').children('.something1')

Kode ini memanggil .closestuntuk mendapatkan induk terdalam yang cocok dengan selektor, kemudian memanggil .childrenelemen induk tersebut untuk menemukan paman yang Anda cari.

— SLaks
sumber

Saya tahu ini agak tua tetapi bukankah lebih baik dalam kasus ini menggunakan parent () daripada terdekat () karena saya membayangkan ada lebih banyak traversal pohon dengan terdekat () ?

— rmorse

1

@acSlater: Dia membutuhkan traversal pohon. parent()adalah elemen yang salah.

— SLaks

Ah ya itu orang tua (). Orang tua () yang Tom perlu maaf! :)

— rmorse

1

@acSlater: Ya; itu akan berhasil. Namun, itu membuat Javascript jauh lebih digabungkan dengan struktur HTML. .closest(...)lebih tangguh, dan lebih mudah dibaca juga.

— SLaks

8

Jika ada yang bertanya-tanya: setelah Anda menemukan orang tua yang tepat menggunakan .closest (), jika Anda mencari elemen anak yang BUKAN anak langsung (tetapi anak dari anak, misalnya), gunakan saja. find () di tempat .children.

— Fabien Snauwaert

17

$(this).parent()

Penjelajahan pohon memang menyenangkan

$(this).parent().siblings(".something1");

$(this).parent().prev(); // if you always want the parent's previous sibling

$(this).parents(".box").children(".something1");

Dan lebih banyak lagi cara, dokumen ini mungkin berguna bagi Anda.

— Anurag
sumber

Terima kasih tetapi tidak mencari orang tua, melainkan anak lain dari orang tua (atau sebenarnya kakek-nenek).

— Tom

Hehe ... memang urusan keluarga.

— Tom

13

Ini akan menemukan orang tua pertama dengan kelas boxkemudian menemukan kelas anak pertama dengan pencocokan regex somethingdan mendapatkan id.

$(".mylink").closest(".box").find('[class*="something"]').first().attr("id")

— pengguna2601995
sumber

6

Jika saya memahami masalah Anda dengan benar, $(this).parents('.box').children('.something1')Apakah ini yang Anda cari?

— Teja Kantamneni
sumber

5

Anda bisa menggunakan .each()dengan .children()dan selektor di dalam tanda kurung:

//Grab Each Instance of Box.
$(".box").each(function(i){

    //For Each Instance, grab a child called .something1. Fade It Out.
    $(this).children(".something1").fadeOut();
});

— Olly
sumber