jQuery: Bir ebeveynin belirli bir çocuğuna nasıl ulaşılır?

92

Basitleştirilmiş bir örnek vermek gerekirse, aşağıdaki bloğu sayfada birçok kez tekrarladım (dinamik olarak oluşturulmuştur):

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

Tıklandığında, bağlantının üst sayfasına şu şekilde ulaşabilirim:

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

Ancak ... şuraya gitmem gerekiyor <div class="something1"> o ebeveyne .

Temel olarak, birisi bana doğrudan başvurmadan üst düzey bir kardeşe nasıl başvuracağımı söyleyebilir mi? Buna ağabey diyelim. Ağabeyinin sınıf adına doğrudan referans, o öğenin sayfadaki her örneğinin kaybolmasına neden olur - ki bu istenen etki değildir.

Denedim:

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

Kimse? Teşekkürler.

— Tom
kaynak

Anurag'ın cevabı doğru gibi görünmeyebilir - kesinlikle beni durdurup düşünmemi sağladı - ama kodunuzda seçicinizin başarısız olmasına neden olan bariz bir yazım hatasını işaret ediyor. JQuery'deki seçici .parent() değil .parents()

— David, Monica'nın

@ricebowl: Yanlış. api.jquery.com/parents

— SLaks

@ricebowl ... parent () bana div bir şey2 verir, bu yüzden div kutusuna ulaşmak için ebeveynlere () ihtiyacım var.

— Tom

Ah; özür dilerim. Umm ... Kimseyi üzmemek için cehaletimi ekranda bırakmak mı, yoksa hatayı silmek mi en iyisi bilmiyorum ... = | Yine de, en azından bugün yararlı bir şey öğrendim; nokta bu, değil mi ..? =)

— David, Monica'yı

1

@ricebowl, endişelenme, katkıda bulunduğun için teşekkürler.

— Tom

146

Çağırma .parents(".box .something1"), seçici ile eşleşen tüm ana öğeleri döndürür .box .something. Başka bir deyişle, .something1içinde olan ve içinde bulunan ana öğeleri döndürür .box.

En yakın ebeveynin çocuklarını şu şekilde almalısın:

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

Bu kod .closest, bir seçici ile eşleşen en içteki ebeveyni .childrenbulmayı çağırır, ardından aradığınız amcayı bulmak için o ana öğeyi çağırır .

— SLaks
kaynak

Bu biraz eski biliyorum ama kullanımı bu durumda daha iyi değil ) ebeveyn ( yerine () en yakın daha ağaç geçişi ile orada hayal (en yakın) ?

— 2012'de

1

@acSlater: Ağaç geçişine ihtiyacı var . parent()yanlış unsurdur.

— SLaks

Ah evet bu ebeveyn (). Ebeveyn () Tom'un özür dilemesi gerekiyor! :)

— rmorse

1

@acSlater: Evet; bu işe yarar. Ancak, Javascript'i HTML yapısıyla çok daha bağlantılı hale getirir. .closest(...)daha dayanıklı ve daha okunaklı.

— SLaks

8

Herhangi birinin merak etmesi durumunda: .closest () kullanarak doğru ebeveyni bulduktan sonra, doğrudan çocuk OLMAYAN (ancak örneğin bir çocuğun çocuğu) bir alt öğe arıyorsanız, sadece kullanın. children yerine find ().

— Fabien Snauwaert

17

$(this).parent()

Ağaç dolaşımı eğlencelidir

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

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

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

Ve çok daha fazla yolla, bu dokümanları yararlı bulabilirsiniz .

— Anurag
kaynak

Teşekkürler ama ebeveyni aramıyordum, daha ziyade ebeveynin başka bir çocuğunu (ya da büyük ebeveyni).

— Tom

Hehe ... bu gerçekten bir aile meselesi.

— Tom

13

Bu, sınıfa sahip ilk ebeveyni boxbulacak ve ardından normal ifade eşleşen ilk alt sınıfı bulacak somethingve kimliği alacak.

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

— kullanıcı2601995
kaynak

6

Sorununuzu doğru anladıysam $(this).parents('.box').children('.something1'), aradığınız bu mu?

— Teja Kantamneni
kaynak

5

Sen kullanabilirsiniz .each()ile .children()parantez içinde bir selektör ve:

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