用jQuery选择一组段落

<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>

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

如果你坚持使用这个结构,那么你正在寻找一个 nextUntil,它会添加以下元素,直到(而不是包含)与你通过的选择符匹配的元素：

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

(下面的实例)

它只选择“第n页”段落之后的段落,而不是“页面”段落本身.如果你还想包括“第n页”段,使用addBack(以前和自己,但是,在自己的v1.8中已经不赞成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>