Слайдер 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/

Это прекрасно работает до тех пор, пока 'pV' не будет скрыто.Оттуда мне нужно отобразить «pA» («стрелка вверх»).

Как мне перейти к этому?

Я предполагаю, что скрытые элементы все еще доступны для навигации - это правильно?

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