eine Reihe von Absätzen mit jQuery

Question

Auswahl habe ich eine HTML-Datei Sätze von Ziffern, zum Beispiel enthält:

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

ich alle Absätze auf einer Seite auswählen muß. Der Inhalt des ersten Absatzes in der Seite n ist immer "Seite n", aber die Anzahl der Absätze in einer Seite ist variabel, ebenso wie der Inhalt der Absätze, die auf die Seitennummer folgen.

Wie kann ich Absätze zwischen Seite n und Seite n + 1 auswählen?

Bisher konnte ich nur herausfinden, wie der ersten Absatz in einer Seite zu wählen, mit jQuery:

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

Vielen Dank im Voraus.

Answer 1

Wenn Sie mit dieser Struktur stecken, die Sie suchen nextUntil, die folgende Elemente summiert sich bis (und nicht einschließlich) ein Element der Auswahl Ihnen passende es passieren:

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

(Live-Beispiel unten.)

Das wählt nur die Absätze nach dem "Page n" Absatz, nicht den "Page n" Absatz selbst aus. Wenn Sie auch die „Seite n“ Absatz aufnehmen möchten, verwenden Sie addBack (früher andSelf, aber andSelf wurde zugunsten von addBack in v1.8 unterstützt), wie folgt aus:

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

Aber wenn Sie die Struktur ändern können ich wahrscheinlich den Inhalt jeder Seite in einem Wrapper-Elemente setzen würde, wie 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> 

Bitte beachte, dass ich auch ein data-* Attribut identifiziert die Seite enthalten (geändert auch die Absätze die Seitenzahl zu h1 enthalten; Die Spezifikation empfiehlt, ein h1 - h6 Element, um den Abschnitt zu identifizieren). Dann wäre es einfach:

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

---

Live-Beispiel aktuelle Struktur mit (ohneaddBack):

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

Wenn Sie in der Lage sind, schreiben „Seite 1 "---" Seite n ", dann sollten Absätze vielleicht eine Klasse haben? Habe ich recht, wenn man annimmt, dass sie dynamisch hinzugefügt werden?

Wie so:

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

diese Weise können Sie einen Absatz und alle Absätze auswählen können, die zu ihnen gehören, ohne dass der Inhalt des Absatzes zu nennen.

Answer 3

Ich empfehle Ihnen, für jeden Absatz id hinzuzufügen.

<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 Diese Funktion wählt Elemente zwischen zwei Markierungen durch 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); 

Sie können es auf diese Weise

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