用jQuery选择一组段落

Question

我有一个包含段落集的HTML文件,例如:

<p>Page 1</p>
<p>Paragraph 1</p>
<p>Paragraph 2</p>

<p>Page 2</p>
<p>First line.</p>
<p>Some text here.</p>
<p>Some other text here.</p>

<p>Page 3</p>
<p>Paragraph 1</p>
<p>Paragraph 2</p>

我需要选择页面中的所有段落.第n页第一段的内容始终为"Page n",但页面中的段落数量是可变的,页面编号后面的段落内容也是可变的.

如何选择Page n和Page n + 1之间的段落？

到目前为止,我只能弄清楚如何使用jQuery选择页面中的第一段:

var n = 2;
$("p:contains(Page " + n + ")").next("p").css('background-color', 'red');

先感谢您.

Answer 1

如果您坚持使用该结构,那么您正在寻找nextUntil,它会添加以下元素,直到(并且不包括)与您传递它的选择器匹配的元素:

var n = 2;
$("p:contains(Page " + n + ")").nextUntil("p:contains(Page " + (n + 1) + ")").css('background-color', 'red');

(下面的实例.)

这只选择"Page n"段落之后的段落,而不是"Page n"段落本身.如果您还想要包含"Page n"段落,请使用addBack(以前andSelf,但在v1.8 andSelf中不赞成使用addBack),如下所示:

var n = 2;
$("p:contains(Page " + n + ")")
    .nextUntil("p:contains(Page " + (n + 1) + ")")
    .addBack()
    .css('background-color', 'red');

但是如果你可以修改结构,我可能会把每个页面的内容放在一个包装元素中,例如section:

<section data-page="1">
    <h1>Page 1</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
</section>
<section data-page="2">
    <h1>Page 2</h1>
    <p>First line.</p>
    <p>Some text here.</p>
    <p>Some other text here.</p>
</section>
<section data-page="3">
    <h1>Page 3</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
</section>

请注意,我还包含一个data-*标识页面的属性(也更改了包含页码的段落h1;规范建议包含h1- h6元素来标识该部分).然后它将是简单的:

$("section[data-page=" + n + "] > p").css(/*...*/);

使用当前结构的实例(无 addBack):

var colors = {
  1: "red",
  2: "green",
  3: "blue"
};
var n;
for (n = 1; n <= 3; ++n) {
  $("p:contains(Page " + n + ")").nextUntil("p:contains(Page " + (n + 1) + ")").css('background-color', colors[n]);
}

<p>Page 1</p>
<p>Paragraph 1</p>
<p>Paragraph 2</p>

<p>Page 2</p>
<p>First line.</p>
<p>Some text here.</p>
<p>Some other text here.</p>

<p>Page 3</p>
<p>Paragraph 1</p>
<p>Paragraph 2</p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>