2010-03-08 101 views
80

舉一個簡單的例子,我有以下塊重複頁面,很多時候(它是動態生成的):jQuery:如何獲得父母的特定孩子?

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

點擊時,我可以得到該鏈接的父:

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

但是...我需要去那個特定父母的<div class="something1">

基本上,有人可以告訴我如何引用一個更高級別的兄弟姐妹,而不能直接引用它?我們稱之爲大哥。直接引用兄弟的類名會導致頁面上該元素的每個實例都淡出 - 這不是預期的效果。

我已經試過:

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

有人嗎?謝謝。

+0

Anurag的回答可能看起來不是正確的 - 這當然讓我停下來思考 - 但它指出了代碼中的一個明顯的錯字,導致您的選擇器失敗。 jQuery中的選擇器是'.parent()'* not *'.parents()' – 2010-03-08 02:29:30

+0

@ricebowl:錯誤。 http://api.jquery.com/parents/ – SLaks 2010-03-08 02:30:38

+0

@ ricebowl ... parent()會給我div div2,所以我需要父母()去div框。 – Tom 2010-03-08 02:31:09

回答

120

調用.parents(".box .something1")將返回與選擇器.box .something匹配的所有父元素。換句話說,它會返回.something1的父元素,它們在.box之內。

你需要得到最接近的父母的孩子,像這樣:

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

此代碼調用.closest得到最裏面的家長選擇匹配,那麼父元素調用.children找到叔叔你正在尋找。

+0

非常感謝,完全按照要求工作。 – Tom 2010-03-08 02:29:22

+0

我知道這是有點老,但是在這種情況下使用** parent()**而不是** closest()**會更好,因爲我認爲有更多的樹遍歷** closest()* *? – acSlater 2012-01-23 13:30:24

+1

@acSlater:他_needs_樹遍歷。 'parent()'是錯誤的元素。 – SLaks 2012-01-23 16:29:00

13
$(this).parent() 

樹的遍歷是樂趣

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

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

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

還有更多的方式,你可能會發現這些docs很有幫助。

+0

謝謝,但並沒有尋找父母,而是父母(或祖父母實際上)的另一個孩子。 – Tom 2010-03-08 02:29:59

+0

呵呵......它的確是一個家庭事務。 – Tom 2010-03-08 02:33:34

5

如果我正確理解你的問題,$(this).parents('.box').children('.something1')這是你在找什麼?

+0

這也適用。 – Tom 2010-03-08 02:38:41

3

你可以在括號中使用.each().children()和選擇:

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

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

這將找到box類第一父然後找到正則表達式匹配something第一子類,並獲得ID。

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