我有一个包含段落的
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页之间选择段落？
到目前为止,我只能弄清楚如何使用jQuery选择页面中的第一段：
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>
