2011-10-03 149 views
1

我有一些HTML,看起來像這麻煩遍歷DOM

<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(); 
}); 

我沒有成功尚未雖然。

回答

0

你試過:

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

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

0

嘗試;

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

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

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

你的嘗試失敗,原因如下:

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

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

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