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

Utilisation de .each() dans JQuery pour parcourir les éléments d'étude notes_jquery

WBOY
Libérer: 2016-05-16 16:32:02
original
1220 Les gens l'ont consulté

Lorsque vous écrivez un onglet aujourd'hui, vous devez utiliser .each() dans jquery. Obtenez le numéro de l'élément li en obtenant le paramètre index dans each() pour faciliter l'affichage du bloc suivant. Écrivez-le sur un test. page Ok le code suivant :

Copier le code Le code est le suivant :




onglet






         

                                                                                                                                                                                                                                                                                                        < 🎜>                                                                                                                                                                                                                                                                 
  • Option 2

  •                                                                                                                                                                                                                                                               
  • Option 3

  •                                                                                                                                                                                                                                                         
  • Option 4

  •                                                                                                                                                                                                                

                                             
    Contenu 1

                                                                                                                                                                                                                                                                                                                                                                           





    Les résultats du test étaient normaux. Plus tard, lorsque je l'ai utilisé sur une page réelle, j'ai découvert que lorsque la liste li ci-dessus était modifiée, les blocs div ci-dessous ne changeaient pas avec des blocs différents, je pensais que c'était du style CSS et réel. use. D'autres styles de la page étaient en conflit. Après avoir remplacé tous les sélecteurs CSS par des sélecteurs uniques, j'ai constaté que le problème existait toujours, j'ai donc jugé qu'il devrait être ici :

    Copier le code Le code est le suivant :

    $("#title .titsh").removeClass("titsh");
    $("#content .consh").removeClass("consh");
    $(this).addClass("titsh");
    $("#content>div:eq(" index ")").addClass("consh");

    Il n'y a aucun problème lors de la suppression des styles dans la première et la deuxième phrase, il est normal d'ajouter le style CSS de titsh à la balise li actuelle. obtenu via div : eq (index) Échec lors de l'ajout de styles au bloc.

    Alors me voilà :

    Copier le code Le code est le suivant :

    $("li").each(function(index){
    $(this).mouseover(function(){

    J'ai ajouté une fenêtre contextuelle d'alerte (index) entre ces deux phrases. En regardant l'effet, j'ai constaté que les valeurs d'index de plus de 10 balises li étaient alertées. Il y avait en fait d'autres balises li sur cette page. Par conséquent, la valeur d'index itérée par each() ne correspond pas à la valeur d'index du bloc div ci-dessous. De cette façon, lorsque la balise li ci-dessus change, le bloc div ci-dessous ne change pas. en conséquence, j'ai donc changé le code js :

    Copier le code Le code est le suivant :



    Ajout de restrictions au sélecteur de l'élément li qui doit être itéré avec .each(), afin qu'il ne puisse trouver que la balise li dans mon onglet pour obtenir chacun la valeur d'index. Le problème est résolu et je peux. aller dormir!

    É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