Maison > interface Web > tutoriel CSS > Comment cibler et manipuler un élément en fonction de son attribut de données dans jQuery ?

Comment cibler et manipuler un élément en fonction de son attribut de données dans jQuery ?

Linda Hamilton
Libérer: 2024-11-05 02:33:02
original
911 Les gens l'ont consulté

How to Target and Manipulate an Element Based on its Data Attribute in jQuery?

Recherche d'éléments par valeur d'attribut de données dans jQuery

Vous disposez de plusieurs éléments avec des structures et des attributs de données similaires. La tâche consiste à cibler et à manipuler un élément spécifique en fonction de la valeur de son attribut de données.

Dans votre cas, vous souhaitez ajouter une classe à l'élément avec une valeur d'attribut data-slide de 0. Pour y parvenir, vous pouvez utiliser la syntaxe Attribute Equals Selector dans jQuery.

Solution :

$('.slide-link[data-slide="0"]').addClass('active');
Copier après la connexion

Explication :

  1. Sélecteur d'attribut égal : [attribute="value"] : sélectionne les éléments en fonction de l'attribut et de la valeur spécifiés. Ici, [data-slide="0"] correspond à l'élément qui a un attribut data-slide avec une valeur de 0.
  2. Méthode addClass() : ajoute une nouvelle classe CSS à l'élément sélectionné. Dans ce cas, .addClass('active') applique la classe active à l'élément.

Comparaison avec la méthode find() :

Alors que votre précédent tentative d'utilisation de la méthode find(), elle fonctionne différemment du sélecteur d'attribut égal. find() recherche les descendants des éléments sélectionnés qui correspondent au sélecteur spécifié. Dans ce contexte, il rechercherait des éléments enfants avec une valeur d'attribut data-slide de 0, ce qui n'est pas ce que vous souhaitiez.

Démo Fiddle :

[Exemple Démo Fiddle](https://jsfiddle.net/example-of-attribute-equals-selector/)

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!

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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal