Pregunta selectores jQuery en atributos de datos personalizados con HTML5


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, menos que, más grande que, etc.".

532
2017-11-10 16:15


origen


Respuestas:


$("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"

Mira hacia Selectores jQuery : contiene un selector

aquí hay información sobre el : contiene selector


859
2017-11-10 16:21



jQuery UI tiene un :data() selector que también puede ser utilizado. Ha estado presente desde Versión 1.7.0 parece.

Puedes usarlo así:

Obtener todos los elementos con un data-company atributo

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

Obtener todos los elementos donde data-company igual Microsoft

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

Obtener todos los elementos donde data-company no es igual Microsoft

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

etc ...

Una advertencia de la nueva :data() selector es que debe configurar el data valor por código para que sea seleccionado Esto significa que para que lo anterior funcione, definir el data en HTML 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 use $(...).data("datakey", "value") de esta o maneras similares.


56
2018-05-27 13:12



jsFiddle Demo

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

La consulta básica se ha cubierto anteriormente, y usando John Hartsockes responder va a ser la mejor opción para obtener cada elemento 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 varias consultas, es bueno guardar 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 contengan la palabra soft

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

También es posible obtener elementos cuya finalización de atributo de datos coincide

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>


28
2018-04-27 22:03



Solución Pure / vanilla JS (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 debes usar válido Selector de CSS (actualmente Nivel 3)

TEST 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 bits ) La siguiente captura de pantalla muestra los resultados del navegador más rápido (Safari):

enter image description here

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

Entonces el ganador es PureJSy 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


0
2018-06-29 09:22