jQuery的滑塊 - >如何遍歷DOM正確

Question

我的代碼：

<div id = "1"> 
    <h1>Heading 1</h1> 
    <p class = "V">VVV</p> 
    <ul> 
     <li>line 1</li> 
     <li>line 2</li> 
    </ul> 
    <p class = "A">AAA</p> 
</div> 

<div id = "2"> 
    <h1>Heading 2</h1> 
    <p class = "V">VVV</p> 
    <ul> 
     <li>line 1</li> 
     <li>line 2</li> 
    </ul> 
    <p class = "A">AAA</p> 
</div> 


$('ul').hide(); 
$('p.A').hide(); 
$('p.V').click(function(){ 
     $(this).next('ul').slideDown('slow'); 
     $(this).hide(); 
     $(this).closest('p.A').show(); // <-- How do I select 'p.A' in the current div?  
    }); 

http://jsfiddle.net/S8xcz/7/

這個偉大的工程，直到 'p.V' 是隱藏的。從那裏，我需要顯示'p.A'（'向上箭頭'）。

如何瀏覽這個？

我假設隱藏的元素仍然通航 - 這是正確的？

Answer 1

的closest方法上升DOM樹找到一個祖先，你可能想使用nextAll('p.A')。

http://jsfiddle.net/ambiguous/pWDth/

或者parent()和find()：$(this).parent().find('p.A').show();

http://jsfiddle.net/ambiguous/pWDth/1/

或許siblings：$(this).siblings('p.A').show();

http://jsfiddle.net/ambiguous/pWDth/2/

我可能會使用$(this).parent().find('p.A')因爲這是對HTML是如何安排最不敏感。

Answer 2

更換

$(this).closest('p.A').show(); 

與

$(this).siblings('p.A:first').show();