jQuery find elemento por valor de atributo de dados

103

Eu tenho alguns elementos como abaixo:

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

Como posso adicionar uma classe ao elemento que tem um data-slidevalor de atributo de 0(zero)?

Tentei muitas soluções diferentes, mas nada funcionou. Um exemplo:

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

Qualquer ideia?

jquery html css custom-data-attribute MrUpsidown
fonte
2
Para explicar um pouco as coisas aqui, a razão pela qual isso não funciona é porque você está tentando encontrar os descendentes de .slide-linkcom o atributo de [data-slide="0"]. Uma vez que algo não pode ser descendente de si mesmo, não tem nada a retornar. No entanto, se você tivesse um wrapper em torno desses links, isso teria funcionado:$('.slide-link-wrapper').find('[data-slide="0"]').addClass('active');
DondeEstaMiCulo
Consulte também stackoverflow.com/q/4191386/292060
goodeye

Respostas:

223

Use o Seletor de Igualdade de Atributo

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

Fiddle Demo

.encontrar()

isso desce da árvore

Obtenha os descendentes de cada elemento no conjunto atual de elementos correspondentes, filtrados por um seletor, objeto jQuery ou elemento.

Tushar Gupta - curioustushar
fonte
2
Foi mal. Eu tentei isso, mas no lugar errado (antes de adicionar meus elementos dinamicamente ...). De qualquer forma, obrigado pelo esforço! Funciona bem.
MrUpsidown
@MrUpsidown Bem-vindo, feliz em ajudar :)
Tushar Gupta - curioustushar
1
Uau! essa solução é ótima! Tive um problema por horas, mas isso resolveu!
como faço para igualá-lo a um valor de variável var slidernumber = "0";, em vez da constante "0"?
Tony gil
Se por algum motivo você não pode depender de uma determinada classe, então você pode apenas usar um curinga para a primeira parte como este $ ('* [data-slide = "0"]'). AddClass ('ativo') ;
SeanMC
59

Você também pode usar .filter ()

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

Procurei a mesma solução com uma variável em vez da String.
Espero poder ajudar alguém com minha solução :)

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

você também pode usar o andSelf()método para obter o envoltório do DOM, então find()pode ser uma solução alternativa conforme sua ideia

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

Feminino
fonte