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?

— 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

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