Как получить последовательные элементы с помощью jquery?

Question

Пожалуйста, просмотрите следующий фрагмент кода -

HTML

<div class="aclass"> 
    <h1>This is heading one</h1> 
    <p>This is paragraph one, this will be hidden automatically</p> 
    <p>This is paragraph two, this will be hidden automatically</p> 
    <p>This is paragraph three, this will be hidden automatically</p> 
    <h1>This is heading two</h1> 
    <p>This is paragraph four, this will be hidden automatically</p> 
    <p>This is paragraph five, this will be hidden automatically</p> 
</div> 

CSS

.aclass p {display:none;} 

JS

$(document).ready(function(){ 
    $('.aclass h1').click(function(){ 
     $(this).next('p').toggle(); 
    }); 
}); 

Этот JS код включает отображение одного р тега после тег h1 при нажатии на тег h1. Но мне нужно переключить отображение последовательных p-тэгов (от одного до трех при нажатии на заголовок 1)

Что должен быть для кода jQuery?

Answer 1

Я играл на скрипке для вас: http://jsfiddle.net/hMsXz/2/

здесь код для сохранения кликов:

$('.aclass h1').click(function(){ 
    $(this).nextUntil('h1','p').toggle(); 
}); 

Answer 2

Использование .nextUntil:

$('.aclass h1').click(function() { 
    $(this).nextUntil('h1', 'p').toggle(); // Selects all p tags after the h1 
              // stops when it hits an h1 
});​ 

DEMO: http://jsfiddle.net/dt7LH/

Answer 3

Я предполагаю, что ваш смысл расширить/свернуть все <p> теги ниже нажмите <h1>?

Используйте nextUntil('h1'), чтобы выбрать все элементы сиблинга до метки <h1>.

Answer 4

Использование .nextUntil введена в JQuery 1.4

$(document).ready(function(){ 
    $('.aclass h1').click(function(){ 
     $(this).nextUntil('h1').toggle(); 
    }); 
});