Selettori jQuery su attributi di dati personalizzati tramite HTML5

Vorrei sapere quali selettori sono disponibili per questi attributi di dati forniti con HTML5.

Prendendo questo pezzo di HTML come esempio:

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

Ci sono selettori per ottenere:

• Tutti gli elementi con data-company="Microsoft"sotto"Companies"
• Tutti gli elementi con data-company!="Microsoft"sotto"Companies"
• In altri casi è possibile utilizzare altri selettori come "contiene, minore di, maggiore di, ecc ...".

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

Cerca in jQuery Selectors : contiene è un selettore

ecco le informazioni sul : contiene selettore

jQuery UIha un :data()selettore che può anche essere usato. Sembra che esista dalla versione 1.7.0 .

Puoi usarlo in questo modo:

Ottieni tutti gli elementi con un data-companyattributo

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

Ottieni tutti gli elementi dove data-company ugualeMicrosoft

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

Ottieni tutti gli elementi dove data-company non è ugualeMicrosoft

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

eccetera...

Un avvertimento del nuovo :data()selettore è che è necessario impostare il datavalore per codice affinché sia ​​selezionato. Ciò significa che per far funzionare quanto sopra, la definizione di datain HTML non è sufficiente. Devi prima fare questo:

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

Questo va bene per le applicazioni a pagina singola in cui è probabile che si utilizzi $(...).data("datakey", "value")in questo o in altri modi.

jsFiddle Demo

jQuery fornisce diversi selettori (elenco completo) per rendere operative le query che stai cercando. Per rispondere alla tua domanda "In altri casi è possibile utilizzare altri selettori come" contiene, minore di, maggiore di, ecc ... "." puoi anche usare contiene, inizia con e finisce con per guardare questi attributi di dati html5. Vedi l'elenco completo sopra per vedere tutte le tue opzioni.

Le query di base sono state trattate sopra e l'utilizzo della risposta di John Hartsock sarà la soluzione migliore per ottenere tutti gli elementi della società di dati o per ottenere tutti tranne Microsoft (o qualsiasi altra versione di:not ).

Per espandere questo agli altri punti che stai cercando, possiamo usare diversi meta-selettori. Innanzitutto, se hai intenzione di fare più query, è utile memorizzare nella cache la selezione principale.

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

Successivamente, possiamo cercare aziende in questo set che iniziano con G

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

O forse aziende che contengono la parola soft

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

È anche possibile ottenere elementi il ​​cui attributo finale dei dati corrisponda

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>

Soluzione JS pura / vaniglia (esempio funzionante qui )

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

In querySelectorAll è necessario utilizzare un selettore CSS valido (attualmente Level3 )

SPEED TEST (2018.06.29) per jQuery e Pure JS: il test è stato eseguito su MacOs High Sierra 10.13.3 su Chrome 67.0.3396.99 (64-bit), Safari 11.0.3 (13604.5.6), Firefox 59.0.2 (64 -po). Lo screenshot seguente mostra i risultati per il browser più veloce (Safari):

PureJS è stato più veloce di jQuery di circa il 12% su Chrome, il 21% su Firefox e il 25% su Safari. È interessante notare che la velocità per Chrome è stata di 18,9 milioni di operazioni al secondo, Firefox 26 milioni, Safari 160,9 milioni (!).

Quindi il vincitore è PureJS e il browser più veloce è Safari (oltre 8 volte più veloce di Chrome!)

Qui puoi eseguire i test sul tuo computer: https://jsperf.com/js-selectors-x