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 este fragmento 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 utilizar otros selectores como "contiene, menor que, mayor que, etc...".

Nov 10 '10 23:11 Jose3d

jQuery UITiene un :data()selector que también se puede utilizar. Parece que existe desde la versión 1.7.0 .

Puedes usarlo así:

Obtener todos los elementos con un data-companyatributo

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

Obtener todos los elementos donde data-companyson igualesMicrosoft

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 lo anterior funcione, definir el dataen HTML no es suficiente. Primero debes hacer esto:

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

Esto está bien para aplicaciones de una sola página en las que es probable que se utilice $(...).data("datakey", "value")de esta manera o de formas similares.

May 27 '2014 13:05 rhughes

jsFiddle Demo

jQuery proporciona varios selectores (lista completa) para que las consultas que busca 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 con y termina con para ver estos atributos de datos html5. Consulte la lista completa anterior para ver todas sus opciones.

La consulta básica se cubrió anteriormente, y utilizar la respuesta de John Hartsock será la mejor opción para obtener todos los elementos de datos de la empresa o para obtener todos, excepto Microsoft (o cualquier otra versión de ).:not

Para ampliar esto a los otros puntos que está buscando, podemos utilizar varios metaselectores. Primero, si va a realizar varias 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 empresas que contengan la palabra soft

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

También es posible obtener elementos cuyo final del atributo de datos coincida

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>

Apr 27 '2015 22:04 Travis J