jquery - 使用 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 页中第一段的内容始终为“第 n 页”，但一页中的段落数是可变的，页码后面的段落内容也是可变的。

如何选择第 n 页和第 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>