jQuery trova elemento in base al valore dell'attributo dati

103

Ho alcuni elementi come di seguito:

<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>

Come posso aggiungere una classe all'elemento che ha un data-slidevalore di attributo di0 (zero)?

Ho provato molte soluzioni diverse ma niente ha funzionato. Un esempio:

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

Qualche idea?

— MrUpsidown
fonte

2

Per spiegare un po 'le cose qui, il motivo per cui questo non funziona è perché stai cercando di trovare i discendenti di .slide-linkcon l'attributo di [data-slide="0"]. Poiché qualcosa non può essere un discendente di se stesso, non ha nulla da restituire. Tuttavia, se avessi un wrapper attorno a questi collegamenti, allora avrebbe funzionato:$('.slide-link-wrapper').find('[data-slide="0"]').addClass('active');

— DondeEstaMiCulo

Vedi anche stackoverflow.com/q/4191386/292060

— goodeye

225

Usa il selettore Attribute Equals

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

Fiddle Demo

.trova()

funziona lungo l'albero

Ottieni i discendenti di ogni elemento nel set corrente di elementi corrispondenti, filtrati da un selettore, un oggetto jQuery o un elemento.

— Tushar Gupta - curioustushar
fonte

2

Colpa mia. L'avevo provato ma nel posto sbagliato (prima di aggiungere dinamicamente i miei elementi ...). Comunque grazie per lo sforzo! Funziona bene.

— MrUpsidown

@MrUpsidown Benvenuto Felice di aiutare :)

— Tushar Gupta - curioustushar

1

Wow! questa soluzione è fantastica! Ho avuto un problema per ore ma questo lo ha risolto!

come lo equiparo a un valore variabile var slidernumber = "0";, invece che alla costante "0"?

— tony gil

Se per qualche motivo non puoi dipendere dalla presenza di una certa classe, puoi semplicemente usare un carattere jolly per la prima parte come questo $ ('* [data-slide = "0"]'). AddClass ('active') ;

— SeanMC

59

Puoi anche usare .filter ()

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

— Anton
fonte

5

Ho cercato la stessa soluzione con una variabile invece della stringa.
Spero di poter aiutare qualcuno con la mia soluzione :)

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

— Aleshanee
fonte

3

puoi anche usare il andSelf()metodo per ottenere il wrapper DOM che contiene, quindi find()puoi aggirare la tua idea

$(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>

Espandi lo snippet

— Girish
fonte