jQuery-Selektoren für benutzerdefinierte Datenattribute mit HTML5

Ich würde gerne wissen, welche Selektoren für diese Datenattribute verfügbar sind, die mit HTML5 geliefert werden.

Nehmen Sie dieses Stück HTML als Beispiel:

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

Gibt es Selektoren zu bekommen:

• Alle Elemente mit data-company="Microsoft"unten"Companies"
• Alle Elemente mit data-company!="Microsoft"unten"Companies"
• In anderen Fällen ist es möglich, andere Selektoren wie "enthält, kleiner als, größer als usw." zu verwenden.

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

Schauen Sie sich jQuery Selectors an : enthält einen Selektor

Hier finden Sie Informationen zum : enthält Selektor

jQuery UIhat einen :data()Selektor, der auch verwendet werden kann. Es gibt es anscheinend seit Version 1.7.0 .

Sie können es so verwenden:

Holen Sie sich alle Elemente mit einem data-companyAttribut

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

Holen Sie sich alle Elemente, wo data-companygleich istMicrosoft

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

Holen Sie sich alle Elemente, wo data-companynicht gleich istMicrosoft

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

usw...

Eine Einschränkung des neuen :data()Selektors besteht darin, dass Sie den dataWert per Code festlegen müssen , damit er ausgewählt wird. Dies bedeutet, dass die Definition datain HTML nicht ausreicht , damit dies funktioniert . Sie müssen dies zuerst tun:

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

Dies ist in Ordnung für Anwendungen mit nur einer Seite, bei denen Sie $(...).data("datakey", "value")diese oder ähnliche Methoden wahrscheinlich verwenden .

jsFiddle Demo

jQuery bietet mehrere Selektoren (vollständige Liste) , damit die von Ihnen gesuchten Abfragen funktionieren. Um Ihre Frage zu beantworten "In anderen Fällen ist es möglich, andere Selektoren wie" enthält, kleiner als, größer als usw. ... "zu verwenden. Sie können auch enthält, beginnt mit und endet mit, um diese HTML5-Datenattribute anzuzeigen. Sehen Sie sich die vollständige Liste oben an, um alle Ihre Optionen anzuzeigen.

Die Grund anfragende wurde oben und mit bedeckt John Hartsock ‚s Antwort wird die beste Wette sein , um entweder alle Daten unternehmens Element zu erhalten, oder ein jeder mit Ausnahme von Microsoft (oder jede andere Version zu bekommen :not).

Um dies auf die anderen Punkte zu erweitern, nach denen Sie suchen, können wir mehrere Meta-Selektoren verwenden. Wenn Sie mehrere Abfragen durchführen möchten, ist es zunächst hilfreich, die übergeordnete Auswahl zwischenzuspeichern.

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

Als nächstes können wir nach Unternehmen in diesem Set suchen, die mit G beginnen

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

Oder vielleicht Firmen, die das Wort soft enthalten

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

Es ist auch möglich, Elemente abzurufen, deren Endattribut mit dem Datenattribut übereinstimmt

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>

Pure / Vanilla JS-Lösung (Arbeitsbeispiel hier )

// 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 müssen Sie einen gültigen CSS-Selektor verwenden (derzeit Level3 ).

SPEED TEST (2018.06.29) für jQuery und Pure JS: Der Test wurde unter MacOs High Sierra 10.13.3 unter Chrome 67.0.3396.99 (64-Bit), Safari 11.0.3 (13604.5.6) und Firefox 59.0.2 (64) durchgeführt -bisschen). Der folgende Screenshot zeigt die Ergebnisse für den schnellsten Browser (Safari):

PureJS war schneller als jQuery, etwa 12% bei Chrome, 21% bei Firefox und 25% bei Safari. Interessanterweise betrug die Geschwindigkeit für Chrome 18,9 Millionen Operationen pro Sekunde, für Firefox 26 Millionen und Safari 160,9 Millionen (!).

Der Gewinner ist also PureJS und der schnellste Browser ist Safari (mehr als 8x schneller als Chrome!)

Hier können Sie Tests auf Ihrem Computer durchführen: https://jsperf.com/js-selectors-x