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.
Antworten:
Schauen Sie sich jQuery Selectors an : enthält einen Selektor
Hier finden Sie Informationen zum : enthält Selektor
quelle
$('div[data-col="1"][data-row="2"]')
Wird dies das div auswählen, bei dem data-col gleich 1 und data-row gleich 2 ist, oder wird es eines von beiden auswählen?.attr('data-something', 'value')
von festlegen , um das Update im HTML anzuzeigen. Wie pro stackoverflow.com/questions/6827810/...data
den Aufruf einzugeben?$('#element').data('something')
jQuery UI
hat 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-company
AttributHolen Sie sich alle Elemente, wo
data-company
gleich istMicrosoft
Holen Sie sich alle Elemente, wo
data-company
nicht gleich istMicrosoft
usw...
Eine Einschränkung des neuen
:data()
Selektors besteht darin, dass Sie dendata
Wert per Code festlegen müssen , damit er ausgewählt wird. Dies bedeutet, dass die Definitiondata
in HTML nicht ausreicht , damit dies funktioniert . Sie müssen dies zuerst tun:Dies ist in Ordnung für Anwendungen mit nur einer Seite, bei denen Sie
$(...).data("datakey", "value")
diese oder ähnliche Methoden wahrscheinlich verwenden .quelle
:data()
Selektor oder die.data()
Methode verwendet?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.
Als nächstes können wir nach Unternehmen in diesem Set suchen, die mit G beginnen
Oder vielleicht Firmen, die das Wort soft enthalten
Es ist auch möglich, Elemente abzurufen, deren Endattribut mit dem Datenattribut übereinstimmt
quelle
Pure / Vanilla JS-Lösung (Arbeitsbeispiel hier )
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
quelle