Comment ajouter une classe à un élément en fonction de la valeur de son attribut de données à l'aide de jQuery ?

jQuery : Rechercher un élément par valeur d'attribut de données

Dans le balisage HTML, les éléments peuvent se voir attribuer des attributs de données personnalisés à l'aide de l'attribut data-* syntaxe des attributs. Ces attributs sont couramment utilisés pour stocker des informations supplémentaires accessibles ou manipulables par le code JavaScript.

Un cas d'utilisation courant consiste à ajouter une classe spécifique à un élément en fonction de la valeur de son attribut de données. Par exemple, considérons les éléments HTML suivants :

<a class="slide-link" href="#" data-slide="0">1</a><br><a class="slide-link" href="#" data-slide="1">2</a><br><a class="slide-link" href="#" data- slide="2">3</a><br>

Notre objectif est d'ajouter une classe "active" à l'élément avec la valeur d'attribut data-slide de 0 (zéro ).

Sélecteur d'attribut égal

jQuery fournit un sélecteur d'attribut égal qui nous permet de sélectionner des éléments en fonction de la valeur exacte d'un attribut spécifique. Pour atteindre notre objectif, nous pouvons utiliser le code suivant :

$('.slide-link[data-slide="0"]').addClass('active');<br>

Ce code sélectionne l'élément avec la classe "slide-link" et l'attribut data-slide égal à "0". Il y ajoute ensuite la classe "active".

Comprendre .find()

La méthode .find(), qui a été utilisée lors de la tentative initiale, fonctionne en parcourant l'arborescence DOM. Cependant, dans ce cas, nous souhaitons sélectionner l’élément en fonction de son attribut data, et non de ses descendants. Par conséquent, l'utilisation du sélecteur d'attribut égal est plus appropriée pour cette tâche.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!