jQuery find élément par valeur d'attribut de données

103

J'ai quelques éléments comme ci-dessous:

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

Comment puis-je ajouter une classe à l'élément qui a une data-slidevaleur d'attribut de 0(zéro)?

J'ai essayé de nombreuses solutions différentes mais rien n'a fonctionné. Un exemple:

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

Une idée?

jquery html css custom-data-attribute MrUpsidown
la source

2

Pour expliquer un peu les choses ici, la raison pour laquelle cela ne fonctionne pas est que vous essayez de trouver les descendants de .slide-linkavec l'attribut de [data-slide="0"]. Puisque quelque chose ne peut pas être un descendant de lui-même, il n'a rien à retourner. Cependant, si vous aviez un wrapper autour de ces liens, cela aurait fonctionné:$('.slide-link-wrapper').find('[data-slide="0"]').addClass('active');

DondeEstaMiCulo

Voir aussi stackoverflow.com/q/4191386/292060

goodeye

225

Utiliser le sélecteur d'attribut égal

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

Fiddle Demo

.trouver()

ça marche dans l'arbre

Obtenez les descendants de chaque élément dans l'ensemble actuel d'éléments correspondants, filtrés par un sélecteur, un objet jQuery ou un élément.

Tushar Gupta - Curioustushar
la source

2

Ma faute. J'avais essayé ça mais au mauvais endroit (avant d'ajouter mes éléments dynamiquement ...). En tout cas merci pour l'effort! Fonctionne très bien.

MrUpsidown

@MrUpsidown Welcome Happy to help :)

Tushar Gupta - curioustushar

1

Hou la la! cette solution est géniale! J'ai eu un problème pendant des heures mais cela l'a résolu!

comment est-ce que je l'assimile à une valeur variable var slidernumber = "0";, au lieu de la constante "0"?

tony gil le

Si, pour une raison quelconque, vous ne pouvez pas dépendre d'une certaine classe, vous pouvez simplement utiliser un caractère générique pour la première partie comme ceci $ ('* [data-slide = "0"]'). AddClass ('active') ;

SeanMC

59

Vous pouvez également utiliser .filter ()

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

Anton
la source

5

J'ai recherché la même solution avec une variable au lieu de la chaîne.
J'espère pouvoir aider quelqu'un avec ma solution :)

var numb = "3";
$(`#myid[data-tab-id=${numb}]`);

Aleshanee
la source

3

vous pouvez également utiliser la andSelf()méthode pour obtenir le conteneur DOM, puis find()contourner votre idée

$(function() {
  $('.slide-link').andSelf().find('[data-slide="0"]').addClass('active');
})

.active {
  background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a class="slide-link" href="#" data-slide="0">1</a>
<a class="slide-link" href="#" data-slide="1">2</a>
<a class="slide-link" href="#" data-slide="2">3</a>

Développer l'extrait

Girish
la source

jQuery find élément par valeur d'attribut de données

Réponses: