Maison > interface Web > js tutoriel > Guide d'utilisation de $(this).index et $.each dans jQuery_jquery

Guide d'utilisation de $(this).index et $.each dans jQuery_jquery

WBOY
Libérer: 2016-05-16 16:30:54
original
1436 Les gens l'ont consulté

En réponse à une certaine exigence au travail, le changement d'onglet a pour effet d'effectuer différentes modifications HTML en fonction du nombre total d'éléments de contenu sous chaque option (si le contenu sous l'onglet est vide, il est égal à XXX, sinon il est égal à XXX)

Copier le code Le code est le suivant :

$(fonction(){
           $(".bao").hide();
              $(".bao").eq(0).show();
              $(".head li").click(function(){
$(this).addClass('cur').siblings().removeClass("cur");
$(".bao").eq($(this).index()).show().siblings(".bao").hide()
               var a=$(".bao").eq($(this).index()).find('li')
Si(a.length<0){
alert("Je suis inférieur à 0 !!")
              }
           });
            fonction moren(){
            var moren=$(".moren").find('li')
Si(moren.length==0){
alert("Je suis vide~aucune chance")
              }
          }
})

Tout d'abord, déclarez que l'en-tête de l'onglet s'appelle l'en-tête

Le contenu de l'onglet s'appelle contenu~

La première méthode qui me vient à l'esprit (méthode stupide) :

La liaison ajoute un événement de clic. Exécuté lors du changement d'en-tête. L'en-tête obtient le contenu correspondant en fonction de son propre index. Après avoir parcouru l'élément li sous le contenu, le nombre total sous le contenu correspondant à chaque en-tête est obtenu.

Parce que c'est ce qui a été découvert après l'événement click, mais le premier élément de l'en-tête a été ignoré. Je voulais qu'il commence à s'exécuter lors de l'actualisation du navigateur, j'ai donc ajouté plus d'éléments au premier élément de l'en-tête. cette classe de classe. Enfin~

Obtenez simplement l'effet que je veux. Lorsque le nombre==0||!==0, ce que je veux sera exécuté.

Mais réfléchissez. Quelque chose d'inattendu peut se produire plus tard. Je ne veux pas qu'il soit exécuté lorsque je clique. Je veux qu'il soit exécuté pour moi une fois le navigateur actualisé et chargé. Je suis donc un débutant et j'ai travaillé dur pour trouver une méthode

D'une autre façon, j'ai l'impression que c'est mieux ~ :

Copier le code Le code est le suivant :

$(fonction(){
            $(".bao").hide();
              $(".bao").eq(0).show();
              $(".head li").click(function(){
$(this).addClass('cur').siblings().removeClass("cur");
$(".bao").eq($(this).index()).show().siblings(".bao").hide()
           });
        var aaa= $(".bao ul")
aaa.each(function(){
            var b=$(this).children('li').length
alerte(b)
Si(b==0){
                             $(this).append("
J'ai été ajouté après 0
")
            }
          })
})

Cette méthode utilise $.each()

C'est plus pratique, pour l'instant j'obtiens les résultats souhaités. $.each() traverse chaque élément de contenu, puis obtient le nombre total d'éléments li sous le contenu lui-même, puis je peux juger et obtenir l'effet que je veux

É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