JQuery选择下一个相似的元素

Question

假设我们有标记:

 <h1 id="heading1">Heading 1</h1>
 <p>Paragraph 1</p>
 <p>Paragraph 2</p>
 <p>Paragraph 3</p>
 <p>Paragraph 4</p>
 <p>Paragraph 5</p>
 <h2 id="heading2">Heading 2</h2>

问题:如何选择#heading1之后的5个"p"元素?我尝试了下面的代码，但它不符合我的期望:

 jQuery('#heading1").next(p); 

它将只选择第一个'p'包含'Paragraph 1'文本的

解决方案吗?

Answer 1

可以使用nextUntil()。

当遇到作为参数传递的选择器时，它将选择下面所有的兄弟项并退出

jQuery('#heading1').nextUntil('h2');

不确定下一个主要元素是什么，但知道你只想要<p>标签，你可以使用:

 jQuery('#heading1').nextUntil(':not(p)');

nextUntil() API docs

演示

Answer 2

使用

$("#heading1").nextAll("p").eq(4)

4为第5个"p"，索引从0开始

http://jsfiddle.net/6GBa7/1/

Answer 3

您可以使用 :header 伪选择器，它适用于所有类型的标头。

jQuery('#heading1').nextUntil(':header')

<<p> 小提琴演示/strong>