JQuery的之前最近一個元素

Question

內選擇一個子元素，我有一些HTML這樣的：

<article> 
    <aside> 
    <p class="target-goal">This is my goal to target, which is initially hidden.</p> 
    </aside> 
    <header> 
    <h1>Title</h1> 
    <time>5:00</time> 
    </header> 
    <a href="somewhere.php" class="toggle">Show Target</a> 
</article> 

我想使它所以當你點擊.toggle我可以顯示p.target-goal。

這裏的jQuery的我一直很努力，伴隨着幾個變化使用最接近等：

$('.toggle').click(function(e) { 
e.preventDefault(); 
$(this).prev('aside').children('.target-goal').slideToggle(); 
}); 

任何想法，我可能是做錯了什麼？

Answer 1

$('.toggle').click(function(e) { 
e.preventDefault(); 
$(this).parents('article').find('.target-goal').slideToggle(); 
}); 

Answer 2

試試這個：

$('.toggle').click(function(e) { 
    e.preventDefault(); 
    $(this).closest('article').find('aside').find('.target-goal').slideToggle(); 
}); 

Answer 3

試試這個：因爲.prev()看起來眼前的前一個兄弟，而你的情況是一個頭元素

$('.toggle').click(function(e) { 
    e.preventDefault(); 
    $(this).closest('article').find('.target-goal').slideToggle(); 
}); 

你的方式不靈了。但是，您可以完成.prev().prev()，但我建議使用.closest()。

jsFiddle example

Answer 4

.prev選擇很前面的元素，因此它選擇header因爲你傳遞一個參數（aside），他們不匹配，它返回任何結果。

您可以使用兄弟姐妹：

$(this).siblings('aside').children('.target-goal').slideToggle(); 

或prevAll：

$(this).prevAll('aside').children('.target-goal').slideToggle(); 

或最接近/發現：

$(this).closest('article').find('.target-goal').slideToggle();