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页第一段的内容始终为＆＃34; Page n＆＃34;，但页面中的段落数量是可变的，页码后面的段落内容也是如此。

如何选择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，但{1}}已弃用，而v1.8中的andSelf已弃用，例如这样：

addBack

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

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

请注意，我还添加了标识页面的<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]);
}

Answer 2

如果你能写“Page 1”---“Page n”，那么段落应该有一个类吗？我是否正确地假设它们是动态添加的？

像这样：

<p class="p1">Page 1</p>
<p class="belongs_p1">Paragraph 1</p>
<p class="belongs_p1">Paragraph 2</p>

<p class="p2">Page 2</p>
<p class="belongs_p2">First line.</p>
<p class="belongs_p2">Some text here.</p>
<p class="belongs_p2">Some other text here.</p>

<p class="p3">Page 3</p>
<p class="belongs_p3">Paragraph 1</p>
<p class="belongs_p3">Paragraph 2</p>

通过这种方式，您可以选择一个段落以及属于它的所有段落，而无需调用段落的内容。

Answer 3

我建议你为每个段落添加id。

<p id="one">Page 1</p>
<p>Paragraph 1</p>
<p>Paragraph 2</p>

<p id="two">Page 2</p>
<p>First line.</p>
<p>Some text here.</p>
<p>Some other text here.</p>

<p id="three">Page 3</p>
<p>Paragraph 1</p>
<p>Paragraph 2</p>

此jquery函数按id选择两个标记之间的元素。

(function ($) {
    $.fn.between = function (elm0, elm1) {
        var index0 = $(this).index(elm0);
        var index1 = $(this).index(elm1);

        if (index0 <= index1)
            return this.slice(index0, index1 + 1);
        else
            return this.slice(index1, index0 + 1);
    }
})(jQuery);

你可以这样使用

$('body').between($('#one'), $('#two')).each(function () {
    // Do what you want.
});

用jQuery选择一组段落

3 个答案: