Introduction à l'utilisation des méthodes jQuery traversal-nextUntil() et prevUntil()

Cet article présente l'utilisation de la méthode jQuery traversal-nextUntil() et de la méthode prevUntil(). Les amis dans le besoin peuvent se référer à

nextUntil() pour obtenir tous les éléments frères suivants de chaque élément. Lorsqu'il y a des paramètres, la recherche s'arrêtera jusqu'à ce qu'elle rencontre un élément correspondant aux paramètres de cette méthode. Rechercher. Le nouvel objet jQuery renvoyé contient tous les éléments frères suivants, mais n'inclut pas les éléments correspondant au sélecteur, au nœud DOM ou à l'objet jQuery transmis. S'il n'y a pas de paramètres, tous les éléments frères suivants seront sélectionnés, ce qui est identique à la méthode .nextAll().

Syntaxe 1 :

Le code est le suivant :

.nextUntil(sélecteur,filtre)

Syntaxe 2 :

Le code est le suivant :

.nextUntil(element,filter)

Description détaillée
Étant donné un objet jQuery représentant une collection d'éléments DOM, la méthode .nextUntil() nous permet de rechercher des éléments frères qui suivent l'élément dans l'arborescence DOM lors de sa rencontre. un élément frère qui correspond aux paramètres de cette méthode. La recherche s'arrête lorsque l'élément est trouvé. Le nouvel objet jQuery renvoyé contient tous les éléments frères suivants, mais ne contient pas l'élément correspondant au paramètre.

Si le sélecteur ne correspond pas ou si aucun sélecteur n'est spécifié, tous les frères et sœurs suivants seront sélectionnés et les éléments sélectionnés par cette méthode sont les mêmes que la méthode .nextAll().

Depuis jQuery 1.6, un nœud DOM ou un objet jQuery, au lieu d'un sélecteur, peut être transmis à la méthode .nextUntil().

Cette méthode accepte un sélecteur optionnel

expression comme deuxième argument. Si ce paramètre est spécifié, les éléments seront filtrés en détectant s'ils correspondent à ce sélecteur.

Regardons d'abord un exemple :

Le code est le suivant :

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

Le code est le suivant :

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

Les résultats sont les suivants :

Remarque :

1. Autrement dit, l'exemple ci-dessus n'inclut pas #term-2 lui-même

2, ni les éléments correspondant au paramètre 1. Autrement dit, retirez la tête et la queue.

3. Si le sélecteur ne correspond pas ou qu'aucun sélecteur n'est spécifié, tous les compatriotes suivants seront sélectionnés par exemple :

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

J'ai changé le sélecteur ci-dessus du dt d'origine en dts ; , le résultat obtenu est le suivant :

Le code est le suivant :

$("#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");

Les résultats sont les suivants :

Regardons un exemple de sélecteur qui ne fournit pas de filtrage

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

Le résultat est le suivant :

La méthode prevUntil() est similaire à la méthode nextUntil() La différence est que l'une monte et l'autre descend.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!