jQuery ajouter ou supprimer une class à un élément HTML

Définition et Usage La méthode addClass()

La méthode addClass() ajoute une ou plusieurs classes aux éléments html sélectionnés.
Cette méthode ne supprime pas les attributs de classe existants, il ne fait qu'ajoute une ou plusieurs valeurs pour l'attribut class.

Tip : Pour ajouter plus d'une classe, séparer les noms de classes avec un espace.

Syntaxe

$(sélecteur).addClass(class)

Description :Ajoute la classe spécifiée à chacun de l'ensemble des éléments sélectionnés.

Pour le version jquery 1.0: addClass (className)

className Un ou plusieurs noms de classe à être ajouté à l'attribut de classe de chaque élément correspondant.

Pour le version jquery 1.4: addClass (fonction (index, currentClass))

fonction (index, currentClass) Une fonction renvoyant un ou plusieurs noms de classes à être ajoutés au noms de classe existante séparés par des espaces. Reçoit la position d'index de l'élément dans le jeu et le nom de classe existant comme arguments. Au sein de la fonction, on utilise this pour désigner l'élément en cours dans le jeu.

NOTE: Il est important de noter que cette méthode ne remplace pas une classe. Il ajoute simplement la classe, il l'ajout à tout ce qui peut être déjà existant dans les éléments.

Plus d'une catégorie peut être ajoutée à une à l'ensemble d'éléments sélectionnés, elles doivent être séparées par un espace, comme suit :

$("p").addClass("maClass votreClass");

Cette méthode est souvent utilisée avec .removeClass() pour basculer les classes des éléments de l'un à l'autre, comme suit :

$("p").removeClass("maClass noClass").addClass("votreClass");

Ici, les classes maClass et noClass sont supprimés de tous les paragraphes, tandis que la classe votreClass est ajouté.
A partir de la version jQuery 1.4, la méthode .addClass() peut recevoir une fonction.

$("ul li:last").addClass(function() {
  return "item-" + $(this).index();
});

Si on a une liste non ordonnée avec cinq éléments <li> , cet exemple ajoute la classe "item-4" au dernièr <li> .

Exemple1: Ajouter une classe à un élément

Sélectionner le code


<!DOCTYPE html>
 <html lang="fr">
 <head>
     
<meta charset="utf-8">
   <title>jQuery demo
</title>   
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script >
$(document).ready(function(){
  $("button").click(function(){
   
$("p:last").addClass("selected");
  });
});
</script>
<style>
  p { margin: 8px; font-size:16px; }
  .selected { color:#f00; }
  .highlight { background:yellow; }
  </style>
</head>
<body>
<h1>Ceci est un titre</h1>
<p>Ceci est un  paragraphe.</p>
<p>Ceci est un autre paragraphe.</p>
<p class="highlight">Ceci est un troisième
paragraphe.</p>
<button>Ajouter calasse au dernier
élément p</button>
</body>
</html>

Dans l'exemple ci dessus nous avons ajouter la classe selected qui donne une couleur rouge au dernier paragraphe p qui a déjà une classe qui donne une couleur jaune au background, addclass'() n'a pas supprimé la classe existante.

Exemple 2: L'utilisation d'une fonction pour ajouter des classes d'éléments sélectionnés.

Sélectionner le code


<!DOCTYPE html>
 <html lang="fr">
 <head>
     
<meta charset="utf-8">
   <title>jQuery demo
</title>   

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

  <script >
$(document).ready(function(){
  $("button").click(function(){
   
$('p').addClass(function(n){
     
return 'Class_' + n;
    });
  });
});
</script>
<style type="text/css">
.Class_0
{
color:blue;
}
.Class_1
{
color:red;
}
</style>
</head>
<body>
<h1>Ceci est un titre</h1>
<p>Ceci est un  paragraphe.</p>
<p>Ceci est un autre paragraphe.</p>
<button>Ajouter calasses à
l'élément p</button>
</body>
</html>

Dans l'exemple ci-dessus: function(n) retourne la valeur class_n n étant l'index de l'élément sélectionné.
La méthode addclass() va ajouter la class_0 à l'élément p avec index = 0 et la class_1 à l'élément p avec index = 1

Exemple 3: Comment ajouter deux noms de classe à un élément sélectionné.

Sélectionner le code


<!DOCTYPE html>
 <html lang="fr">
 <head>
     
<meta charset="utf-8">
   <title>jQuery demo
</title>   
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script >
$(document).ready(function(){
  $("button").click(function(){
    
$("p:last").addClass("selected highlight");
  });
});
</script>
<style>
  p { margin: 8px; font-size:16px; }
  .selected { color:#f00; }
  .highlight { background:yellow; }
  </style>
</head>
<body>
<h1>Ceci est un titre</h1>
<p>Ceci est un  paragraphe.</p>
<p>Ceci est un autre paragraphe.</p>
<p>Ceci est un troisième
paragraphe.</p>
<button>Ajouter les calasse au dernier
élément p</button>
</body>
</html>

Exemple 4: Comment utiliser addClass () et removeClass () pour supprimer une classe, et ajouter une nouvelle classe.

Sélectionner le code


<!DOCTYPE html>
 <html lang="fr">
 <head>
     
<meta charset="utf-8">
   <title>jQuery demo
</title>   
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script >
$(document).ready(function(){
  $("button").click(function(){
   
$("p:first").removeClass("intro").addClass('main');
  });
});
</script>
<style type="text/css">
.intro
{
color:red;
}
.main
{
background-color:yellow;
}
</style>
</head>
<body>
<h1>Ceci est un titre</h1>
<p class="intro">Ceci est un 
paragraphe.</p>
<p>Ceci est un autre paragraphe.</p>
<p>Ceci est un troisième
paragraphe.</p>
<button>Ajouter les calasse au dernier
élément p</button>
</body>
</html>

JQuery la méthode HTML removeClass()

Définition et Usage La méthode removeClass()

La méthode removeClass() supprime une ou plusieurs classes des éléments sélectionnés.

Syntaxe

$(sélecteur).removeClass(classname)

Paramètre	Description
ClassName	Facultatif. Spécifie un ou plusieurs noms de classe à supprimer. Pour supprimer plusieurs classes, séparer les noms de classe avec des espaces.

Note : Si ce paramètre est vide, toutes les classes seront supprimées.

Si un nom de classe est inclus comme paramètre, alors seule cette classe sera retirée de l'ensemble des éléments sélectionnés. Si aucun nom de classe n'est spécifié dans le paramètre, toutes les classes seront alors supprimées.

Plus d'une catégorie peut être retirée à la fois, séparée par un espace, de l'ensemble des éléments désignés, comme suit :

$('p').removeClass('myClass yourClass')

La méthode .removeClass() est souvent utilisée avec .addClass() pour basculer entre les classes des éléments de l'un à l'autre, comme suit :

$('p').removeClass('myClass noClass').addClass('yourClass');

Ici, les classes myClass et noClass sont supprimées de tous les paragraphes, tandis que yourClass est ajoutée dans tous les paragraphes.

Mais au lieu de cela et pour remplacer toutes les classes existantes par une autre classe, nous pouvons utiliser .attr('class', 'newClass').

Exemple : enlever la classe « blue » des éléments correspondants.

Sélectionner le code


  <!DOCTYPE html>
  <html>
  <head>
    <script 
  src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
    p { margin: 4px; font-size:16px; font-weight:bolder; }
    .blue { color:blue; }
    .under { text-decoration:underline; }
    .light { background:yellow; }
    </style>
  </head>
  <body>
    <p class="blue under">Bonjour</p>
    <p class="blue under light">comment ça va?</p>
    <p class="blue under"> alors </p>
    <p class="blue under">à bien tot</p>
  <script>$("p:even").removeClass("blue");</script>
  </body>
  </html>

Dans cet exemple nous enlevons la classe blue de paragraphe dont l’index est paire .

Pour supprimer les classe blue et under de paragraphe dont l’index est impaire, remplacer le code par :

Pour supprimer toutes les classes de l’élément dont l’index est 1 remplacer le code par :

Supprimez la classe à l'aide d'une fonction

Une fonction peut être utilisée pour de retirer une classe des éléments sélectionnés.

En jQuery 1.4, la méthode .removeClass() permet d'indiquer la classe à être enlevé en passant une fonction comme paramètre.

Syntaxe

$(sélecteur).removeClass(function(index,oldclass))

Paramètre	Description
function(index,oldclass)	Une fonction qui retourne un ou plusieurs noms de classe à supprimer. index - facultatif. Reçoit la position d'index du sélecteur oldclass - facultatif. Reçoit l'ancienne valeur du sélecteur de classe

Exemple : supprimer une classe en utilisant une fonction.

Sélectionner le code



  <!DOCTYPE html>
  <html>
  <head>
    <script 
  src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script >
  $(document).ready(function(){
    $("button").click(function(){
        $("li").removeClass(function(n) {
        if (n==0||n==1) {return "listitem"}
        else {return ""}
      });
    });
  });
  </script>
  <style type="text/css">
  .listitem
  {
  color:red;
  }
  </style>
  </head>
  <body>
  <h1>Ceci est un titre</h1>
  <ul>
  <li class="listitem">Piere</li>
  <li class="listitem">Luis</li>
  <li class="listitem">Michel</li>
  <li class="listitem">Steve</li>
  </ul>
  <button>Suprimer la class "listitem" des éléments li avec index
  0 et 1</button>
  </body>
  </html>

Changer la classe d'un élément

Exemple :

Comment utiliser addClass() et removeClass() pour supprimer une class et ajoutez une nouvelle classe.

Sélectionner le code


  <!DOCTYPE html>
  <html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script >
  $(document).ready(function(){
    $("button").click(function(){
      $("p:first").removeClass("intro").addClass('main');
    });
  });
  </script>
  <style type="text/css">
  .intro
  {
  color:red;
  }
  .main
  {
  background-color:yellow;
  }
  </style>
  </head>
  <body>
  <h1>Ceci est un titre</h1>
  <p class="intro">Ceci est un paragraphe.</p>
  <p>Ceci est un autre paragraphe.</p>
  <button>Change class du 1er élément p</button>
  </body>
  </html>

JQuery les méthodes pour manipuler HTML

Par gerywa 25 juillet 2014