Selectores de jQuery en atributos de datos personalizados usando 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, menor que, mayor que, etc.".

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

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.

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>

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

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