Méthode de recherche jQuery pour les éléments frères et sœurs_jquery

L'exemple de cet article décrit la méthode jQuery de recherche d'éléments homologues. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

1. méthode next()

est utilisé pour rechercher un seul élément frère immédiatement après chaque élément correspondant. Vous pouvez également spécifier un sélecteur pour filtrer les éléments frères selon vos besoins. Le format de syntaxe est le suivant :
.

Copier le code Le code est le suivant :

suivant([sélecteur])
$("p").next("p").css("color", "#FCF");

2. méthode nextAll()

est utilisé pour rechercher tous les éléments frères qui suivent immédiatement chaque élément correspondant. Si nécessaire, vous pouvez également spécifier un sélecteur pour filtrer les éléments frères
.

Copier le code Le code est le suivant :

suivantTout([sélecteur])
$("p").nextAll().css("color", "blue");

3. Méthode nextUtil()

est utilisé pour obtenir les éléments frères qui suivent immédiatement chaque élément correspondant, jusqu'à (mais sans inclure) l'élément correspondant au sélecteur donné, dans le format suivant :

Copier le code Le code est le suivant :

nextUtil([sélecteur])

Exemple :

Copier le code Le code est le suivant :

$("#div1").nextUtil( "div" ).css("border", "1px solid red");

Définissez les bordures de tous les éléments frères intermédiaires, de l'élément avec l'identifiant div1 jusqu'à la fin de l'élément div suivant, en rouge

4. Méthode prev()

est utilisé pour rechercher un seul élément frère immédiatement avant chaque élément correspondant. Vous pouvez également spécifier un sélecteur pour filtrer les éléments frères selon vos besoins. Le format de syntaxe est le suivant :
.

Copier le code Le code est le suivant :

prev([sélecteur])

Exemple :

Copier le code Le code est le suivant :

$("#div2").prev( "span" ).css("color", "blue");

La police de l'élément span juste avant l'élément div2 deviendra bleue.

5. Méthode prevAll()

est utilisé pour rechercher tous les éléments frères avant l'élément actuel. Vous pouvez également spécifier un sélecteur pour filtrer les éléments frères. Le format de syntaxe est le suivant :

Copier le code Le code est le suivant :

prevAll([selector])

6. Méthode prevUtil()

est utilisé pour rechercher tous les éléments frères avant l'élément actuel jusqu'à ce que l'élément correspondant soit rencontré. Le format de syntaxe est le suivant :

Copier le code Le code est le suivant :

prevUtil([sélecteur])
$("#div2").prevUtil("input").css("color", "red");

7. Méthode siblings()

est utilisé pour rechercher tous les éléments frères de chaque élément correspondant. Si nécessaire, vous pouvez également spécifier un sélecteur pour filtrer ces éléments frères. Le format est le suivant :

Copier le code Le code est le suivant :

frères et sœurs([sélecteur])
$("div").siblings().css("color", "red");

Un exemple est le suivant :

Copier le code Le code est le suivant :

🎜> $(document).ready(function(){
$("#td1").next().css("color","red"); //Définit la couleur de police pour l'élément frère suivant de l'élément td
          $("#td1").nextAll().css("border","1px solid blue");//Définir des bordures pour tous les éléments frères derrière l'élément td
$("#td2").prev().css("color","#99c"); //Définit la couleur de police d'un élément frère devant l'élément td
          $("#td2").prevAll().css("background","#FCF");//Définir l'arrière-plan de tous les éléments frères devant l'élément td
$("#td3").siblings().css("color","#99F"); //Définit la couleur de police pour les éléments frères de l'élément spécifié dans le champ actuel
})

Tableau de statut d'hébergement en chambre d'hôtel

Chambre simple (déjà occupée) Chambre Double (ne séjourne pas) Suite Deluxe (Déjà séjourné) Chambre simple (déjà occupée) Suite Deluxe (ne séjourne pas) Chambre Simple (Déjà occupée) Chambre Double (ne séjournant pas) Suite Deluxe Chambre Simple (ne séjournant pas) Suite Deluxe (ne séjourne pas) Chambre Simple (ne séjournant pas) Chambre Double (ne séjournant pas) Suite Deluxe (Déjà séjourné) Chambre Simple (Déjà occupée) Suite Deluxe (ne séjournant pas) Chambre Simple (Déjà occupée) Chambre Double (Déjà occupée) Suite Deluxe (ne séjourne pas) Chambre Simple (ne séjournant pas) Suite Deluxe (Déjà séjourné) Chambre Simple (Déjà occupée) Chambre Double (ne séjournant pas) Suite Deluxe (Déjà séjourné) Chambre Simple (Déjà occupée) Suite Deluxe (ne séjourne pas)



Le rendu est le suivant :

J'espère que cet article sera utile à la programmation jQuery de chacun.