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?

— 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

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