麻煩遍歷DOM

Question

我有一些HTML，看起來像這

<dl class="dropdown"> 
    <dt><span>Gender</span><a href="">Go</a></dt> 
    <dd class="shadow_50"> 
     <ul> 
      <li><a href="#"><span class="option">male</span><span class="value">1</span></a></li> 
      <li><a href="#"><span class="option">female</span><span class="value">2</span></a></li> 
     </ul> 
    </dd> 
</dl> 

的DD被設置爲隱藏GO鏈接被點擊時，我有一些代碼，滑動DD向下或向上。但我的問題是，當我有多個實例，如果這些在一個頁面中，一次點擊打開頁面上的所有DD，我如何定位最接近點擊的DD，

我試過以下，

$(".dropdown dt a").click(function(e) { 
    $(this).closest("dd").slideToggle(defaults.speed); 
e.preventDefault(); 
}); 

而且這一點，

$(".dropdown dt a").click(function(e) { 
    $(this).next("dd").slideToggle(defaults.speed); 
    e.preventDefault(); 
}); 

我沒有成功尚未雖然。

Answer 1

你試過：

$(".dropdown dt a").click(function(e) { 
    $(this).closest("dl").find("dd").slideToggle(defaults.speed); 
    e.preventDefault(); 
}); 

Youc't使用next（），因爲你的鏈接只有一個SPAN作爲同級因爲它只是走到樹不能使用最接近

Answer 2

嘗試;

$(this).parent().siblings("dd").slideToggle(defaults.speed); 

Answer 3

您有正確的想法，但您嘗試過的方法並不像您所期望的那樣工作。最簡單的方法可能會去到父，然後找到相應的元素：

$(this).parent().next().slideToggle(defaults.speed); 

你的嘗試失敗，原因如下：

.closest遍歷DOM（它看起來向上，所以檢查父母，然後是所有更遠的祖先，直到找到匹配）。在你的情況下，所需的元素不是this的祖先，所以這是行不通的。

.next獲取當前匹配元素的下面的兄弟。在你的情況下，因爲a是dt中的最後一個元素，所以沒有以下兄弟姐妹。

需要注意的是，如果你的DOM結構很可能會改變您可能需要使用closest到達dl元素，然後用.find找到dd（見@Nicola Peluchetti的答案）。