Attributs: fonction addClass

  • Variantes:

Ajoute une classe pour chaque élement sélectionné.

Version: disponible depuis la version 1.0 de JQuery

Paramétres:

  • class (String): nom de la classe a ajouter

Valeur de retour: objet jQuery

Exemple :

ajoute la classe "selected" au dernier paragraphe.

$("p:last").addClass("selected");
  <html>
  <head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/javascript">
  	$(document).ready(function(){
  		$("p:last").addClass("selected");
  	});
  </script>
  
  <style>
  p { margin: 8px; font-size:16px; }
  .selected { color:blue; }
  
  </style>
  </head>
  <body>
  	
<p>Paragraphe 1</p>
<p>Paragraphe 2</p>
<p>Paragraphe 3</p>
  </body>
  </html>

1 Commentaire (afficher/poster)

Permet d'ajouter une ou plusieurs classes (séparées par des espaces) aux éléments de la sélection, par le biais d'une fonction.

Version: disponible depuis la version 1.4 de JQuery

Paramétres:

  • fonction(index,class) (fonction): fonction qui retourne une liste de une ou plusieurs classes à ajouter séparées par un espace

Valeur de retour: objet jQuery

Exemple :

assigne au dernier item de la liste ul la classe correspondant a sa position.

$('ul.test li').addClass(function() {
  return 'item-' + $(this).index();
});
  <html>
  <head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/javascript">
  	$(document).ready(function(){
  		$('ul.test li').addClass(function() {
  return 'item-' + $(this).index();
});
  	});
  </script>
  
  <style>
  
.item-1{background-color:yellow;}

  </style>
  </head>
  <body>
  	
<ul class="test">
<li>premier item</li>
<li>second item</li>
</ul>

  </body>
  </html>

1 Commentaire (afficher/poster)