Selectores de jQuery en atributos de datos personalizados usando HTML5


636

Me gustaría saber qué selectores están disponibles para estos atributos de datos que vienen con HTML5.

Tomando esta pieza de HTML como ejemplo:

<ul data-group="Companies">
  <li data-company="Microsoft"></li>
  <li data-company="Google"></li>
  <li data-company ="Facebook"></li>
</ul>

¿Hay selectores para obtener:

  • Todos los elementos con data-company="Microsoft"abajo"Companies"
  • Todos los elementos con data-company!="Microsoft"abajo"Companies"
  • En otros casos, es posible usar otros selectores como "contiene, menor que, mayor que, etc.".

44
Si mira aquí, encontrará todo lo que necesita api.jquery.com/category/selectors :-)
Allan Kimmer Jensen

Respuestas:


1005
$("ul[data-group='Companies'] li[data-company='Microsoft']") //Get all elements with data-company="Microsoft" below "Companies"

$("ul[data-group='Companies'] li:not([data-company='Microsoft'])") //get all elements with data-company!="Microsoft" below "Companies"

Busque en jQuery Selectors : contiene es un selector

Aquí hay información sobre : contiene selector


¿esto funcionara? $('div[data-col="1"][data-row="2"]') ¿Esto seleccionará el div donde data-col es igual a 1 y data-row es igual a 2, o seleccionará en cualquiera de esos?
LuudJacobs

10
¿Funcionará esto si los datos se establecen a través de .data ('algo', valor)? A menudo, esto no crea un atributo real al adjuntar el valor. Sé que el OP fue bastante específico con respecto a los atributos, pero pensé en crear conciencia en caso de que otros tengan problemas con este selector.
AaronLS

15
@AaronLS No, no lo hace (al menos no con versiones anteriores de jQuery, por ejemplo, 1.4.4): debe configurar los datos .attr('data-something', 'value')para ver la actualización en el HTML. Según stackoverflow.com/questions/6827810/…
Matty J

¿No hay una manera de obtener valores de atributos de datos sin escribir datala llamada?
ahnbizcad

@gwho$('#element').data('something')
Gaui

69

jQuery UItiene un :data()selector que también se puede usar. Ha existido desde la versión 1.7.0 parece.

Puedes usarlo así:

Obtenga todos los elementos con un data-companyatributo

var companyElements = $("ul:data(group) li:data(company)");

Obtenga todos los elementos donde sea data-companyigualMicrosoft

var microsoft = $("ul:data(group) li:data(company)")
                    .filter(function () {
                        return $(this).data("company") == "Microsoft";
                    });

Obtener todos los elementos donde data-companyno es igualMicrosoft

var notMicrosoft = $("ul:data(group) li:data(company)")
                       .filter(function () {
                           return $(this).data("company") != "Microsoft";
                       });

etc ...

Una advertencia del nuevo :data()selector es que debe establecer el datavalor por código para que se seleccione. Esto significa que para que funcione lo anterior, definir el dataHTML no es suficiente. Primero debes hacer esto:

$("li").first().data("company", "Microsoft");

Esto está bien para aplicaciones de una sola página donde es probable que lo use $(...).data("datakey", "value")de esta manera o de otras formas similares.


No entiendo tu advertencia. Esto funciona bien para mí, y no hago ninguna otra referencia a los datos en el js. $ ('# id'). text ($ ('# mydatasource'). data ('vacío')); Esto llenará el elemento #id con el contenido de la etiqueta de datos vacíos en el elemento #mydatasource.
Relajarse en Chipre

44
@FacebookAnswers ¿Usó el :data()selector o el .data()método?
Rhughes

Veo a que te refieres. Estaba usando el método, mientras que su advertencia se refería al método.
Relajarse en Chipre

77
^ te refieres a su advertencia referida al selector.
ahnbizcad

1
Extraño, ahora parece funcionar en el violín con Jquery 3.3.1: jsfiddle.net/kai_noack/q6nzLs20/1
Kai Noack

39

jsFiddle Demo

jQuery proporciona varios selectores (lista completa) para que las consultas que está buscando funcionen. Para responder a su pregunta "En otros casos, es posible utilizar otros selectores como" contiene, menor que, mayor que, etc. ". También puede usar contiene, comienza y termina con para ver estos atributos de datos html5. Vea la lista completa arriba para ver todas sus opciones.

La consulta básica se ha cubierto anteriormente, y el uso de la respuesta de John Hartsock será la mejor opción para obtener todos los elementos de la compañía de datos o para obtener todos, excepto Microsoft (o cualquier otra versión de:not ).

Para expandir esto a los otros puntos que está buscando, podemos usar varios meta selectores. Primero, si va a hacer múltiples consultas, es bueno almacenar en caché la selección principal.

var group = $('ul[data-group="Companies"]');

A continuación, podemos buscar empresas en este conjunto que comiencen con G

var google = $('[data-company^="G"]',group);//google

O quizás compañías que contienen la palabra suave

var microsoft = $('[data-company*="soft"]',group);//microsoft

También es posible obtener elementos cuyas coincidencias finales de atributos de datos

var facebook = $('[data-company$="book"]',group);//facebook

//stored selector
var group = $('ul[data-group="Companies"]');

//data-company starts with G
var google = $('[data-company^="G"]',group).css('color','green');

//data-company contains soft
var microsoft = $('[data-company*="soft"]',group).css('color','blue');

//data-company ends with book
var facebook = $('[data-company$="book"]',group).css('color','pink');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul data-group="Companies">
  <li data-company="Microsoft">Microsoft</li>
  <li data-company="Google">Google</li>
  <li data-company ="Facebook">Facebook</li>
</ul>


6

Solución JS pura / vainilla (ejemplo de trabajo aquí )

// All elements with data-company="Microsoft" below "Companies"
let a = document.querySelectorAll("[data-group='Companies'] [data-company='Microsoft']"); 

// All elements with data-company!="Microsoft" below "Companies"
let b = document.querySelectorAll("[data-group='Companies'] :not([data-company='Microsoft'])"); 

En querySelectorAll debe usar un selector CSS válido (actualmente Level3 )

PRUEBA DE VELOCIDAD (2018.06.29) para jQuery y Pure JS: la prueba se realizó en MacOs High Sierra 10.13.3 en Chrome 67.0.3396.99 (64 bits), Safari 11.0.3 (13604.5.6), Firefox 59.0.2 (64 -poco). La siguiente captura de pantalla muestra los resultados del navegador más rápido (Safari):

ingrese la descripción de la imagen aquí

PureJS fue más rápido que jQuery, aproximadamente un 12% en Chrome, un 21% en Firefox y un 25% en Safari. Curiosamente, la velocidad para Chrome fue de 18.9M de operación por segundo, Firefox 26M, Safari 160.9M (!).

Entonces el ganador es PureJS y el navegador más rápido es Safari (¡más de 8 veces más rápido que Chrome!)

Aquí puede realizar pruebas en su máquina: https://jsperf.com/js-selectors-x

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.