Seletores jQuery em atributos de dados personalizados usando HTML5

Gostaria de saber quais seletores estão disponíveis para esses atributos de dados que acompanham o HTML5.

Tomando este pedaço de HTML como exemplo:

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

Existem seletores para obter:

• Todos os elementos com data-company="Microsoft"abaixo"Companies"
• Todos os elementos com data-company!="Microsoft"abaixo"Companies"
• Em outros casos, é possível usar outros seletores como "contém, menor que, maior 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"

Olhe para os seletores jQuery : contém um seletor

aqui estão as informações no seletor: contains

jQuery UIpossui um :data()seletor que também pode ser usado. Existe desde a versão 1.7.0, ao que parece.

Você pode usá-lo assim:

Obter todos os elementos com um data-companyatributo

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

Obtenha todos os elementos onde data-companyiguaisMicrosoft

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

Obter todos os elementos onde data-companynão é igualMicrosoft

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

etc ...

Uma ressalva do novo :data()seletor é que você deve definir o datavalor pelo código para que ele seja selecionado. Isso significa que, para que o acima funcione, definir o dataHTML não é suficiente. Você deve primeiro fazer isso:

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

Isso é bom para aplicativos de página única em que é provável que você use $(...).data("datakey", "value")dessa maneira ou de maneiras semelhantes.

jsFiddle Demo

O jQuery fornece vários seletores (lista completa) para fazer com que as consultas que você está procurando funcionem. Para responder à sua pergunta "Em outros casos, é possível usar outros seletores como" contém, menor que, maior que, etc ... "." você também pode usar contém, inicia e termina com para examinar esses atributos de dados html5. Veja a lista completa acima para ver todas as suas opções.

A consulta básica foi abordada acima, e usar a resposta de John Hartsock será a melhor aposta para obter todos os elementos da empresa de dados ou para obter todos, exceto a Microsoft (ou qualquer outra versão do ).:not

Para expandir isso para os outros pontos que você está procurando, podemos usar vários meta-seletores. Primeiro, se você fizer várias consultas, é bom armazenar em cache a seleção pai.

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

Em seguida, podemos procurar empresas nesse conjunto que começam com G

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

Ou talvez empresas que contenham a palavra soft

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

Também é possível obter elementos cujo final do atributo de dados corresponde

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>

Solução JS pura / baunilha (exemplo de trabalho aqui )

// 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'])"); 

Em querySelectorAll, você deve usar o seletor CSS válido (atualmente Nível3 )

O SPEED TEST (2018.06.29) para jQuery e JS puro: o teste foi realizado no MacOs High Sierra 10.13.3 no Chrome 67.0.3396.99 (64 bits), Safari 11.0.3 (13604.5.6), Firefox 59.0.2 (64) -mordeu). A captura de tela abaixo mostra os resultados do navegador mais rápido (Safari):

O PureJS foi mais rápido que o jQuery, cerca de 12% no Chrome, 21% no Firefox e 25% no Safari. Curiosamente, a velocidade do Chrome foi de 18,9 milhões de operações por segundo, Firefox 26M, Safari 160,9M (!).

Então o vencedor é o PureJS e o navegador mais rápido é o Safari (mais de 8x mais rápido que o Chrome!)

Aqui você pode executar o teste em sua máquina: https://jsperf.com/js-selectors-x