jQuery-Selektoren für benutzerdefinierte Datenattribute mit HTML5

636

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.
Jose3d
quelle
4
Wenn Sie hier suchen, finden Sie alles, was Sie brauchen api.jquery.com/category/selectors :-)
Allan Kimmer Jensen
1
Duplikat: stackoverflow.com/q/2487747/1066234
Kai Noack

Antworten:

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

John Hartsock
quelle
Ob das funktioniert? $('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?
LuudJacobs
10
Funktioniert dies, wenn Daten über .data ('etwas', Wert) festgelegt werden? Oft wird beim Anhängen des Werts kein tatsächliches Attribut erstellt. Ich weiß, dass das OP in Bezug auf Attribute ziemlich spezifisch war, dachte aber, ich würde das Bewusstsein schärfen, falls andere Probleme mit diesem Selektor haben.
AaronLS
15
@AaronLS Nein, das ist nicht der Fall (zumindest nicht bei älteren Versionen von jQuery, z. B. 1.4.4). Sie müssen die Daten mithilfe .attr('data-something', 'value')von festlegen , um das Update im HTML anzuzeigen. Wie pro stackoverflow.com/questions/6827810/...
Matty J
Gibt es keine Möglichkeit, Datenattributwerte abzurufen, ohne dataden Aufruf einzugeben?
Ahnbizcad
@gwho$('#element').data('something')
Gaui
69

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 .

Rhughes
quelle
Ich verstehe deine Einschränkung nicht. Dies funktioniert gut für mich und ich verweise nicht anders auf Daten in der js. $ ('# id'). text ($ ('# mydatasource'). data ('leer')); Dadurch wird das Element #id mit dem Inhalt des Tags "data-empty" im Element "#mydatasource" gefüllt.
Entspannen in Zypern
4
@FacebookAnswers Haben Sie den :data()Selektor oder die .data()Methode verwendet?
Rhughes
Ich verstehe was du meinst. Ich habe die Methode verwendet, während sich Ihre Einschränkung auf die Methode bezog.
Entspannen in Zypern
7
^ Du meinst, seine Einschränkung bezog sich auf den Selektor.
Ahnbizcad
1
Seltsam, jetzt scheint es in der Geige mit Jquery 3.3.1 zu funktionieren: jsfiddle.net/kai_noack/q6nzLs20/1
Kai Noack
39

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>

Travis J.
quelle
6

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):

Geben Sie hier die Bildbeschreibung ein

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

Kamil Kiełczewski
quelle