Lựa chọn một tập hợp các đoạn văn với jQuery

Question

Tôi có một tập tin HTML có chứa bộ đoạn văn, ví dụ:

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

tôi cần phải chọn tất cả các đoạn văn bản trong một trang. Nội dung của đoạn đầu tiên trong trang n luôn là "Trang n", nhưng số đoạn văn trong một trang có thể thay đổi, cũng như nội dung của các đoạn văn sau số trang.

Làm cách nào để chọn đoạn văn giữa Trang n và Trang n + 1?

Cho đến nay tôi chỉ có thể tìm ra cách để chọn đoạn đầu tiên trong một trang, sử dụng jQuery:

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

Cảm ơn bạn trước.

Answer 1

Nếu bạn đang mắc kẹt với cấu trúc đó, bạn đang tìm kiếm nextUntil, có thêm các yếu tố theo dõi cho đến khi (và không bao gồm) một yếu tố phù hợp với bộ chọn bạn vượt qua nó:

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

(Sống dụ bên dưới.)

Điều đó chỉ chọn các đoạn sau đoạn "Trang n", không phải chính đoạn "Trang n". Nếu bạn cũng muốn bao gồm các "trang n" đoạn văn, sử dụng addBack (trước đây andSelf, nhưng andSelf đã phản đối ủng hộ addBack trong v1.8), như thế này:

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

Nhưng nếu bạn có thể sửa đổi cấu trúc , tôi có lẽ muốn đưa các nội dung của mỗi trang trong một yếu tố wrapper, chẳng hạn như 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> 

Lưu ý rằng tôi cũng bao gồm một thuộc tính data-* xác định các trang (cũng đã thay đổi đoạn văn có chứa các số trang để h1; spec đề xuất bao gồm một h1 - h6 yếu tố để xác định phần). Sau đó, nó sẽ chỉ đơn giản là:

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

---

sống ví dụ sử dụng cấu trúc hiện tại (mà khôngaddBack):

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>

Answer 2

Nếu bạn có thể viết "Trang 1 "---" Trang n ", sau đó có thể đoạn văn phải có một lớp học? Tôi có quyền cho rằng chúng được thêm vào động không?

Giống như vậy:

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

Bằng cách đó bạn có thể chọn một đoạn và tất cả các khoản thuộc về nó, mà không cần phải gọi nội dung của đoạn văn.

Answer 3

Tôi đề nghị bạn thêm id cho mỗi đoạn văn.

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

Hàm jquery này chọn phần tử giữa hai thẻ theo 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); 

Bạn có thể sử dụng nó theo cách này

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