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?

— MrUpsidown
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
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
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
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
source