的jQuery獲取元素的類的父

我的HTML看起來像這樣的：的jQuery獲取元素的類的父

<div class="wrapper"> 
<div class="container1"> 
This is the Element i want to toggle 
</div> 
<div class="container2"> 
<a href="#" class="button">Click</a> 
</div> 
</div>

我想通過點擊按鈕來切換container1。事情是有幾個結構，所以我不能使用ID。我需要在jQuery中使用event.target函數，但我不知道如何獲取父元素和父元素中的「container1」元素以及如何使用slideToggle切換它。

來源

2014-02-26 Philip Feldmann

這要看是它總是要切換按鈕容器的前一個兄弟？如果是這樣，你可以做'.parent（）。prev（'div'）'從''到'.container1' div。父級轉到.container2，然後.prev（'div'）選擇.container1。 –

也許是這個情況下，你可以使用類似

$('.button').click(function(){ 
    $(this) 
     .parent() 
     .siblings() 
     .first() 
     .toggle();

見 this fiddle一個小小的演示。

來源

2014-02-26 14:33:44 RubenGeert

@TrueBlueAussie：很好，我認爲OP主要是關於選擇器。 – RubenGeert

個人而言，我不會選擇這個答案，因爲它是最脆弱的答案。它取決於確切的結構（而不是選擇器匹配），這對維護來說總是一個壞主意。無論如何，幹得好:) –

$('.button').click(function(){ 
    $(this).parent().siblings('.container1').toggle(); 
});

來源

2014-02-26 14:29:23 goten

或者'.parent（）.siblings（）。first（）。toggle（）'。有點取決於html可能/不可能看起來像什麼。 – RubenGeert

您可以使用closest()和siblings()這裏：

$('.button').click(function(e) { 
    e.preventDefault(); 
    $(this).closest('.container2').siblings('.container1').toggle(); 
})

Fiddle Demo

來源

2014-02-26 14:31:36 Felix

@TrueBlueAussie不正確。沒有它，你會被滾動到窗口頂部 – longchiwen

嘗試：

$("a").on("click",function(e){ 
    var el=$(this); // this will be a element 
    el.parents(".wrapper").find(".container1").toggle(); 
    });

「父母」 - 這將讓你的父與類元素「WRA pper「」找到「 - 這將找到包裝類中的子類」container1「的子元素

如果使用jquery綁定到事件，則」this「作用域爲目標元素。您還可以從事件參數「e.target」

這裏的jsfiddle得到目標：http://jsfiddle.net/25vaT/

來源

2014-02-26 14:32:35 longchiwen

'最接近'在這種情況下永遠比'父母'更可取。您不需要/不需要搜索回DOM根目錄。 –

@TrueBlueAussie你是對的。 Perf比較可以在這裏找到http://jsperf.com/jquery-parents-vs-closest/8 – longchiwen

拋開Perf統計數據（雖然這很有用），當你發現第一場比賽時停下來顯然會比搜索每一場比賽更快父母，回到根，爲任何/所有匹配:) –

試試這個

$('.button').on('click', function(e){ 
    e.preventDefault(); 
     $(this).closest('.wrapper').find('.container1').toggle(); 
});

來源

2014-02-26 14:37:54 Jai

+1：儘管在這種情況下使用'on'比'click'更不可讀，這是我最喜歡的答案。這是最有可能的HTML更改生存（並正確禁用錨定點擊）。 –

的jQuery獲取元素的類的父

回答

相關問題