用jQuery选择一组段落

前端之家收集整理的这篇文章主要介绍了用jQuery选择一组段落前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个包含段落的 HTML文件,例如:
  1. <p>Page 1</p>
  2. <p>Paragraph 1</p>
  3. <p>Paragraph 2</p>
  4.  
  5. <p>Page 2</p>
  6. <p>First line.</p>
  7. <p>Some text here.</p>
  8. <p>Some other text here.</p>
  9.  
  10. <p>Page 3</p>
  11. <p>Paragraph 1</p>
  12. <p>Paragraph 2</p>

我需要选择页面中的所有段落.页面n中第一段的内容始终是“第n页”,但是页面中的段落数是可变的,页码后面段落的内容也是可变的.

如何在第n页和第n页之间选择段落?

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

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

先谢谢你.

解决方法

如果你坚持使用这个结构,那么你正在寻找一个 nextUntil,它会添加以下元素,直到(而不是包含)与你通过的选择符匹配的元素:
  1. var n = 2;
  2. $("p:contains(Page " + n + ")").nextUntil("p:contains(Page " + (n + 1) + ")").css('background-color','red');

(下面的实例)

它只选择“第n页”段落之后的段落,而不是“页面”段落本身.如果你还想包括“第n页”段,使用addBack(以前和自己,但是,在自己的v1.8中已经不赞成addBack而已),就像这样:

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

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

  1. <section data-page="1">
  2. <h1>Page 1</h1>
  3. <p>Paragraph 1</p>
  4. <p>Paragraph 2</p>
  5. </section>
  6. <section data-page="2">
  7. <h1>Page 2</h1>
  8. <p>First line.</p>
  9. <p>Some text here.</p>
  10. <p>Some other text here.</p>
  11. </section>
  12. <section data-page="3">
  13. <h1>Page 3</h1>
  14. <p>Paragraph 1</p>
  15. <p>Paragraph 2</p>
  16. </section>

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

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

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

  1. var colors = {
  2. 1: "red",2: "green",3: "blue"
  3. };
  4. var n;
  5. for (n = 1; n <= 3; ++n) {
  6. $("p:contains(Page " + n + ")").nextUntil("p:contains(Page " + (n + 1) + ")").css('background-color',colors[n]);
  7. }
  1. <p>Page 1</p>
  2. <p>Paragraph 1</p>
  3. <p>Paragraph 2</p>
  4.  
  5. <p>Page 2</p>
  6. <p>First line.</p>
  7. <p>Some text here.</p>
  8. <p>Some other text here.</p>
  9.  
  10. <p>Page 3</p>
  11. <p>Paragraph 1</p>
  12. <p>Paragraph 2</p>
  13.  
  14. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

猜你在找的jQuery相关文章