wake-up-neo.com

jQuery-Selektoren für benutzerdefinierte Datenattribute unter Verwendung von HTML5

Ich möchte wissen, welche Selektoren für diese mit HTML5 gelieferten Datenattribute verfügbar sind.

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" unter "Companies"
  • Alle Elemente mit data-company!="Microsoft" unter "Companies"
  • In anderen Fällen ist es möglich, andere Selektoren wie "enthält, kleiner als, größer als, etc ..." zu verwenden.
599
Jose3d
$("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 in jQuery Selectors : enthält einen Selektor

hier gibt es Infos zum : enthält Selektor

953
John Hartsock

jQuery UI hat einen :data() Selector der auch benutzt werden kann. Es gibt es seit Version 1.7. es scheint.

Du kannst es so benutzen:

Erhalte alle Elemente mit einem data-company Attribut

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

Hole alle Elemente, bei denen data-company gleich Microsoft ist

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

Hole alle Elemente, bei denen data-company nicht Microsoft ist

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

etc ...

Eine Einschränkung des neuen Selektors :data() besteht darin, dass Sie den Wert data mit dem Code einstellen müssen, damit er ausgewählt wird. Dies bedeutet, dass das Definieren von data in HTML nicht ausreicht, damit das oben Genannte 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 wahrscheinlich $(...).data("datakey", "value") auf diese oder ähnliche Weise verwenden.

66
rhughes

jsFiddle Demo

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

Die grundlegende Abfrage wurde oben behandelt, und die Verwendung von John Hartsock 's Antwort ​​ist die beste Wahl, um entweder jedes Datenfirmenelement oder jedes zu erhalten mit Ausnahme von Microsoft (oder einer anderen Version von _:not_).

Um dies auf die anderen Punkte zu erweitern, die 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 dieser Gruppe 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 Endung 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>_
37
Travis J

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 ein gültiges CSS-Selektor (derzeit Level ) verwenden.

GESCHWINDIGKEITSTEST (2018.06.29) für jQuery und Pure JS: Der Test wurde auf MacOs High Sierra 10.13.3 mit Chrome 67.0 durchgeführt .3396.99 (64-Bit), Safari 11.0.3 (13604.5.6), Firefox 59.0.2 (64-Bit). Der folgende Screenshot zeigt die Ergebnisse für den schnellsten Browser (Safari):

enter image description here

PureJS war unter Chrome um 12%, unter Firefox um 21% und unter Safari um 25% schneller als jQuery. Interessanterweise betrug die Geschwindigkeit für Chrome 18,9 MB pro Sekunde, für Firefox 26M und Safari 160,9 MB (!).

Sieger ist also PureJS und schnellster Browser ist Safari (mehr als 8x schneller als Chrome!)

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

6