Maison > interface Web > js tutoriel > le corps du texte

Introduction de base et explication détaillée de l'utilisation du sélecteur précédent + suivant dans jQuery

巴扎黑
Libérer: 2017-06-22 09:39:24
original
1812 Les gens l'ont consulté

Le sélecteur

prev + next de jQuery est utilisé pour faire correspondre l'élément suivant immédiatement après l'élément précédent et l'encapsuler en tant que jQuery objet et retour.

Remarque : La plage de recherche du sélecteur next doit être l'élément suivant adjacent à "l'élément précédent" et doit être un élément frère de "l'élément précédent".

Grammaire

// 这里的prev表示具体的选择器
// 这里的next表示具体的选择器
jQuery( "prev + next" )
Copier après la connexion

Les espaces de part et d'autre du symbole + peuvent être omis, mais il n'est pas recommandé de les omettre, sinon les caractères pourraient être trop rapprochés pour affecter la lecture.

Paramètres

Description du paramètre

prev Un sélecteur valide.

suivant Un sélecteur valide.

Valeur de retour

Renvoie un objet jQuery qui encapsule l'élément DOM qui correspond au sélecteur suivant dans l'élément frère suivant immédiatement adjacent à "l'élément précédent".

Bien qu'il y ait au plus un élément frère suivant immédiatement adjacent à un "élément précédent", il peut y avoir plusieurs "éléments précédents", donc il peut y avoir plusieurs éléments DOM correspondants, et ils sont tous encapsulés dans le objet jQuery renvoyé.

Si aucune correspondance correspondante n'est trouvée, un objet jQuery vide est renvoyé.

Exemple et description

Prenons le code HTML suivant comme exemple :

<div id="n1">
    <p id="n2" class="test">
        <span id="n3" class="a">Hello</span>
        <span id="n4">Hello</span>
    </p>
    <p id="n5" class="detail">
        <span id="n6" class="b codeplayer">World
            <span id="n7" class="a">http://365mini.com</span>
            <span id="n8"></span>
            <span id="n9"></span>
        </span>
    </p>
</div>
Copier après la connexion

Maintenant, nous voulons trouver la prochaine balise p frère adjacente à la balise p, vous pouvez écrire le code jQuery suivant :

// 选择了id为n5的一个元素
$("p + p");
Copier après la connexion

Ensuite, si nous trouvons la prochaine balise span frère adjacente à la balise span, vous pouvez écrire le code jQuery suivant :

// 选择了id分别为n4、n8、n9的三个元素
// n4是n3的next,n8是n7的next,n9是n8的next
$("span + span");
Copier après la connexion

Rechercher la prochaine balise span frère adjacente à la balise span contenant le nom de classe a, le code jQuery correspondant est le suivant :

// 选择了id分别为n4、n8的两个元素
// n8没有包含类名a,因此无法匹配其next——n9
$("span.a + span");
Copier après la connexion

Rechercher la balise span frère suivante adjacente à la balise p, le code jQuery correspondant est la suivante :

// 返回一个空的jQuery对象
// HTML中虽然有span标签,但不是p标签的同辈元素,而是其子代或后代
$("p + span");
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal