Wybór zestawu ustępów z jQuery

Question

Mam plik HTML zawierający zestawy punktach, na przykład:

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

muszę zaznaczyć wszystkie akapity na stronie. Treść pierwszego akapitu na stronie n jest zawsze "Strona n", ale liczba akapitów na stronie jest zmienna, podobnie jak treść akapitów następujących po numerze strony.

Jak mogę wybrać akapity między Page n i Page n + 1?

tej pory mogłem tylko dowiedzieć się, jak wybrać pierwszy akapit na stronie, przy użyciu jQuery:

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

Z góry dziękuję.

Answer 1

Jeśli utkniesz z tej struktury, szukasz nextUntil, który dodaje następujące elementy aż (a nie łącznie) element pasujący do selektora przekazać go:

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

(Live przykład poniżej.)

Który wybiera tylko akapity po akapicie "Strona n", a nie sam akapit "Strona n". Jeśli też chcesz dołączyć do strony „n” paragraf, należy addBack (dawniej andSelf, ale andSelf została zastąpiona addBack w v1.8), podobnie jak to:

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

Ale czy można modyfikować strukturę , prawdopodobnie umieścić zawartość każdej strony elementu owijającego, jak 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> 

Należy zauważyć, że również zawarte atrybut data-* identyfikujące strony (również zmienić akapity zawierające numery strony do h1; specyfikacja zaleca włączenie h1 - h6 element do identyfikacji sekcji). Wtedy byłoby po prostu:

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

---

żywo przykład stosując obecną strukturę (bezaddBack):

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

Jeśli jesteś w stanie napisać „Strona 1 "---" Strona n ", to może akapity powinny mieć klasę? Czy mam rację, zakładając, że są one dynamicznie dodawane?

tak:

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

W ten sposób można wybrać punkt i wszystkie akapity, które należą do niego, bez konieczności wywoływania treść ust.

Answer 3

Proponuję dodać id dla każdego akapitu.

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

Ta funkcja jquery wybiera elementy między dwoma znacznikami według 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); 

można go używać w ten sposób

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