Einführung in die Verwendung der jQuery-Methode traversal-nextUntil() und prevUntil()

In diesem Artikel wird die Verwendung der jQuery-Methode traversal-nextUntil() und der prevUntil()-Methode vorgestellt. Freunde in Not können auf

nextUntil() zurückgreifen, um alle folgenden Geschwisterelemente jedes Elements zu erhalten. Wenn Parameter vorhanden sind, wird die Suche angehalten, bis ein Element gefunden wird, das mit den Parametern dieser Methode übereinstimmt Suchen Sie . Das zurückgegebene neue jQuery--Objekt enthält alle folgenden Geschwisterelemente, jedoch keine Elemente, die mit dem Selektor, dem DOM-Knoten oder dem übergebenen jQuery-Objekt übereinstimmen. Wenn keine Parameter vorhanden sind, werden alle folgenden Geschwisterelemente ausgewählt, was mit der Methode .nextAll() identisch ist.

Syntax 1:

Der Code lautet wie folgt:

.nextUntil(selector,filter)

Syntax 2:

Der Code lautet wie folgt:

.nextUntil(element,filter)

Detaillierte Beschreibung
Angesichts eines jQuery-Objekts, das eine Sammlung von DOM-Elementen darstellt, können wir mit der Methode .nextUntil() nach Geschwisterelementen suchen, die dem Element im DOM-Baum folgen ein Geschwisterelement, das mit den Parametern dieser Methode übereinstimmt. Die Suche stoppt, wenn ein Element gefunden wird. Das zurückgegebene neue jQuery-Objekt enthält alle folgenden Geschwisterelemente, jedoch nicht das Element, mit dem der Parameter übereinstimmt.

Wenn der Selektor nicht übereinstimmt oder kein Selektor angegeben ist, werden alle folgenden Geschwister ausgewählt und die von dieser Methode ausgewählten Elemente sind dieselben wie bei der .nextAll()-Methode.

Ab jQuery 1.6 kann anstelle eines Selektors ein DOM-Knoten oder ein jQuery-Objekt an die .nextUntil()-Methode übergeben werden.

Diese Methode akzeptiert einen optionalen Selektor-

Ausdruck als zweites Argument. Wenn dieser Parameter angegeben ist, werden Elemente gefiltert, indem ermittelt wird, ob sie mit diesem Selektor übereinstimmen.

Schauen wir uns zunächst ein Beispiel an:

Der Code lautet wie folgt:

<dl>
  <dt id="term-1">term 1</dt>
  <dd>definition 1-a</dd>
  <dd class="abc">definition 1-b</dd>
  <dd>definition 1-c</dd>
  <dd>definition 1-d</dd>
  <dt id="term-2">term 2</dt>
  <dd>definition 2-a</dd>
  <dd>definition 2-b</dd>
  <dd>definition 2-c</dd>
  <dt id="term-3">term 3</dt>
  <dd>definition 3-a</dd>
  <dd>definition 3-b</dd>
</dl>

Der Code lautet wie folgt:

$("#term-2").nextUntil("dt").css("
background-color
", "red");

Die Ergebnisse sind wie folgt:

Hinweis:

1 Beziehen Sie sich nicht mit ein. Das heißt, das obige Beispiel enthält weder #term-2 selbst

2 noch die Elemente, die mit Parameter 1 übereinstimmen. Das heißt, Kopf und Schwanz entfernen.

3. Wenn der Selektor nicht übereinstimmt oder kein Selektor angegeben ist, werden beispielsweise alle folgenden Landsleute ausgewählt:

Ich habe den obigen Selektor vom ursprünglichen dt in dts geändert Das erhaltene Ergebnis lautet wie folgt:

$("#term-2").nextUntil("dts").css("background-color", "red");

Der Code lautet wie folgt:

$("#term-1").nextUntil("#term-3", "dd").css("color", "blue");
//或者采用DOM元素：
//var term3 = 
document
.getElementById("term-3");
//$("#term-1").nextUntil(term3, "dd").css("color", "blue");

$("#term-1").nextUntil("#term-3", ".abc").css("color", "blue");

Die Ergebnisse sind wie folgt:

Sehen wir uns ein Beispiel eines Selektors an, der keine Filterung bietet

Das Ergebnis ist wie unten dargestellt :

$("#term-1").nextUntil("#term-3").css("color", "blue");

Die prevUntil()-Methode ähnelt der nextUntil()-Methode, der Unterschied besteht darin, dass eine nach oben und die andere nach unten geht.

Das obige ist der detaillierte Inhalt vonEinführung in die Verwendung der jQuery-Methode traversal-nextUntil() und prevUntil(). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!