Javascript Girl
  1. Javascript Girl
  3. JQuery: Comment vérifier si deux éléments ont la même classe
Intereting Posts
Thème de données par défaut JQuery Mobile Remplacer keyCode dans IE 11 Twitter Bootstrap Carousel Slide ne fonctionne pas Nouveau Regexp ne fonctionne pas Foundation 6 Off-canvas menu fermeture automatique après clic Affectation d'une valeur d'incrémentation à des champs dynamiques Pourquoi le $ rootScope n'est-il pas accessible dans le modèle d'une directive avec une portée isolée? AngularJS ng-disabled ne fonctionne pas avec les éléments de la liste Trois JS – Trouver tous les points où un maillage croise un avion Ajout de plus de deux en-têtes de groupe de colonne dans jqgrid Promesses en chaîne avec AngularJS Utilisation correcte de || Le côté du serveur Javascript? Comportement de la fonction incorrecte, qu'est-ce qui ne va pas? Regexp (? <= Chaîne) donne une erreur de groupe invalide?

JQuery: Comment vérifier si deux éléments ont la même classe

Existe-t-il un moyen de vérifier si deux éléments ont le même nom de classe? Mon code ressemble à ça … 

<body class="foo bar cats"> <a href="#" class="foo">Link</a> <a href="#" class="puppies">Link</a>

Ce que je veux faire, c'est ajouter une autre classe au lien foo si elle correspond à une classe dans le corps. Comment vérifier si une des classes de mes liens correspond à une classe dans le corps avec jQuery?

Je suggérerais: 

 $('a').each( function() { var classes = this.classList; for (var i=0,len=classes.length; i<len; i++){ if ($('body').hasClass(classes[i])){ $(this).addClass('bodySharesClass'); } } });​

Démo de JS Fiddle .

Édité pour essayer de rendre compte de l'impossibilité d'Internet Explorer de comprendre / utiliser / implémenter .classList : 

 if (!document.createElement().classList){ var useAttr = true; } $('a').each( function(i) { var classes = []; if (!useAttr){ classes = this.classList; } else { classes = $(this).attr('class'); } for (var i=0,len=classes.length; i<len; i++){ if ($('body').hasClass(classes[i])){ $(this).addClass('bodySharesClass'); } } });

Démo de JS Fiddle .

Modifié car il semble que ma tentative précédente, pour tenir compte d'IE, a échoué. Soupir. Encore! Cette approche devrait fonctionner, même si je ne peux pas la tester, car je suis à la fois IE et Windows: 

 $('a').each( function(i) { var classes = this.className.split(/\s+/); for (var i=0,len=classes.length; i<len; i++){ if ($('body').hasClass(classes[i])){ $(this).addClass('bodySharesClass'); } } });

Démo de JS Fiddle .

Les références:

  • classList .
  • hasClass() .

Ok, en supposant que je vous comprends bien, vous pouvez faire quelque chose comme ça … 

 var link = $(".foo");//or select your link another way var linkClass = link.attr("class"); if($("body").hasClass(linkClass)){ //link has matching class link.addClass("newClass"); }

Comme vous pouvez le constater, j'ai utilisé la fonction hasClass () JQuery pour vérifier si l'onglet du corps a la classe correspondante.

Si votre lien aura potentiellement plus d'un nom de classe, vous pouvez le faire comme ça … 

 var link = $(".foo");//or select your link another way var linkClass = link.attr("class"); var classList = linkClass.split(/\s+/); var matchFound = false; for(var i = 0; i < classList.length; i++){ if($("body").hasClass(classList[i])){ //link has matching class matchFound = true; } } if(matchFound){ link.addClass("newClass"); }

En outre, si vous souhaitez traiter tous vos liens en même temps, vous pouvez l'envelopper dans un JQuery chaque () et changer la première ligne comme ça … 

 $("a").each(function(index){ var link = $(this); //the rest of the above code here }); 
 $('a').hasClass('foo').addClass('whatever');

En utilisant la méthode jquery hasClass () vous conduira à une solution

Voici une suggestion, il pourrait y avoir d'autres (c'est mieux) ainsi 🙂 

 $(document).ready(function() { var $foo = $('.foo'); // select the foo link if ($(body).hasClass($foo.attr('class'))) { $foo.addClass('anotherClass'); } }); 
 var body_classes =$('body').attr('class').split(/\s+/); var foo_link = $('a.foo'); $.each(body_classes, function(index, item){ if (foo_link.hasClass(item)) { foo_link.addClass('class_you_want_to_add'); return false; } });