jQuery buscar elemento por valor de atributo de datos

103

Tengo algunos elementos como a continuación:

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

¿Cómo puedo agregar una clase al elemento que tiene un data-slidevalor de atributo de 0(cero)?

He probado muchas soluciones diferentes pero nada funcionó. Un ejemplo:

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

¿Alguna idea?

jquery html css custom-data-attribute MrUpsidown
fuente
2
Para explicar un poco las cosas aquí, la razón por la que esto no funciona es porque está tratando de encontrar los descendientes de .slide-linkcon el atributo de [data-slide="0"]. Dado que algo no puede ser descendiente de sí mismo, no tiene nada que devolver. Sin embargo, si tuviera una envoltura alrededor de estos enlaces, entonces esto habría funcionado:$('.slide-link-wrapper').find('[data-slide="0"]').addClass('active');
DondeEstaMiCulo
Consulte también stackoverflow.com/q/4191386/292060
goodeye

Respuestas:

223

Usar selector de atributo igual

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

Fiddle Demo

.encontrar()

funciona en el árbol

Obtenga los descendientes de cada elemento en el conjunto actual de elementos coincidentes, filtrados por un selector, objeto jQuery o elemento.

Tushar Gupta - curioustushar
fuente
2
Culpa mía. Lo había intentado pero en el lugar equivocado (antes de agregar mis elementos dinámicamente ...). De todos modos gracias por el esfuerzo! Funciona bien.
MrUpsidown
@MrUpsidown Bienvenido Feliz de ayudar :)
Tushar Gupta - curioustushar
1
¡Guauu! esta solución es genial! Tuve un problema durante horas, ¡pero esto lo solucionó!
¿cómo lo equiparo a un valor variable var slidernumber = "0";, en lugar de la constante "0"?
tony gil
Si por alguna razón no puede depender de que una determinada clase esté allí, puede usar un comodín para la primera parte como este $ ('* [data-slide = "0"]'). AddClass ('active') ;
SeanMC
59

También puede usar .filter ()

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

Busqué la misma solución con una variable en lugar de String.
Espero poder ayudar a alguien con mi solución :)

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

También puede usar el andSelf()método para obtener el contenedor DOM que contiene y luego find()puede funcionar como su 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>
Expandir fragmento

Girish
fuente