Tengo el siguiente escenario:
var el = 'li';
y hay 5 <li>
en la página cada uno con un data-slide=number
atributo (el número es 1,2,3,4,5 respectivamente) .
Ahora necesito encontrar el número de diapositiva activo actualmente que se asigna var current = $('ul').data(current);
y se actualiza en cada cambio de diapositiva.
Hasta ahora, mis intentos no han tenido éxito, tratando de construir el selector que coincida con la diapositiva actual:
$('ul').find(el+[data-slide=+current+]);
no coincide / devuelve nada ...
La razón por la que no puedo codificar la li
parte es que esta es una variable accesible para el usuario que se puede cambiar a un elemento diferente si es necesario, por lo que puede no ser siempre una li
.
¿Alguna idea de lo que me falta?
.find(el+[data-slide=+current+]);
está el código que escribes? parece que te perdiste algunas citas para"[data-slide]"
$('*[data-slide]')
puede usarlo con, por ejemplo$('*[data-slide]').each( function() { ... });
Respuestas:
Debe inyectar el valor de
current
en un selector de Atributo igual :Para entornos JavaScript más antiguos ( ES5 y anteriores):
fuente
$("ul").find(el + "[data-slide='" + current +"']");
.en caso de que no desee escribir todo eso, aquí hay una forma más corta de consultar por atributo de datos:
FYI: http://james.padolsey.com/javascript/a-better-data-selector-for-jquery/
fuente
<ul><li data-slide="item"></li></ul>
el selector de esta respuesta volverá indefinido, por lo que no funciona dado el escenario del usuario. Esta respuesta FUNCIONARÁ para la estructura<ul data-slide="item"><li></li></ul>
Si bien entiendo por qué su popularidad debido a la brevedad, técnicamente es una respuesta incorrecta. jsfiddle.net/py5p2abL/1[0]
para acceder al primer elemento encontrado..find("[data-attrib='value']")
no funcionó. No sé si los valores eran atributos de datos agregados por jQuery o no ...$.find
específicamente los descendientes de ese elemento, pero el uso de la sintaxis de filtro en la cadena de selección simplemente filtrará los resultados.Cuando busque con [data-x = ...], tenga cuidado, no funciona con jQuery.data (..) setter :
Puedes usar esto en su lugar:
fuente
$.fn.filterByData
es brillante; sin embargo, esta es una advertencia para los copy-pasters ... solo necesita$('<b>').filterByData('x', 1)
encontrar<b>
etiquetas condata-x="1"
. si copia y pega la.data(x, 1)
parte ... configurará sudata-x
"1" antes de filtrar.Creo que he mejorado en filterByData extensión de BRM psico a jQuery.
Cuando la extensión anterior buscó en un par clave-valor, con esta extensión también puede buscar la presencia de un atributo de datos, independientemente de su valor.
Uso:
Mostrar fragmento de código
O el violín: http://jsfiddle.net/PTqmE/46/
fuente
Sin JQuery, ES6
Sé que la pregunta es sobre JQuery, pero los lectores pueden querer un método JS puro.
fuente
Me he enfrentado al mismo problema al buscar elementos usando jQuery y el atributo data- *.
así que para su referencia, el código más corto está aquí:
Este es mi código HTML:
Este es mi selector jQuery:
fuente
Espero que esto funcione mejor
Gracias
fuente
Este selector
$("ul [data-slide='" + current +"']");
funcionará para la siguiente estructura:Si bien esto
$("ul[data-slide='" + current +"']");
funcionará para:<ul data-slide="item"><li></li></ul>
fuente
Volviendo a su pregunta original, sobre cómo hacer que esto funcione sin conocer de antemano el tipo de elemento, lo siguiente hace esto:
fuente