Element nach Datenattribut auswählen

1020

Gibt es eine einfache und unkomplizierte Methode, um Elemente anhand ihres dataAttributs auszuwählen ? Wählen Sie beispielsweise alle Anker aus, customerIDderen Datenattribut den Wert hat 22.

Ich zögere etwas, relandere Attribute zum Speichern solcher Informationen zu verwenden, aber ich finde es viel schwieriger, ein Element basierend auf den darin gespeicherten Daten auszuwählen.

Hazem Salama
quelle
2
Siehe auch stackoverflow.com/q/4191386/292060
goodeye
Das hat mir geholfen, alle Datenattribute auszuwählen (unabhängig vom Wert): $('*[data-customerID]')Sie können es zB verwenden$('*[data-customerID]').each( function() { ... });
Kai Noack

Antworten:

1469
$('*[data-customerID="22"]');

Sie sollten in der Lage sein, das wegzulassen *, aber wenn ich mich richtig erinnere, kann dies je nach verwendeter jQuery-Version zu fehlerhaften Ergebnissen führen.

Beachten Sie, dass aus Gründen der Kompatibilität mit der Selectors-API ( document.querySelector{,all}) die Anführungszeichen um den Attributwert ( 22) in diesem Fall nicht weggelassen werden dürfen .

Wenn Sie in Ihren jQuery-Skripten häufig mit Datenattributen arbeiten, sollten Sie das Plugin für benutzerdefinierte HTML5-Datenattribute verwenden . Auf diese Weise können Sie mithilfe von noch besser lesbaren Code schreiben .dataAttr('foo')und nach der Minimierung eine kleinere Dateigröße erzielen (im Vergleich zur Verwendung .attr('data-foo')).

Mathias Bynens
quelle
69
Nur eine Anmerkung, dass .data ('foo') funktioniert, um den Wert eines 'data-foo'-Attributs seit jQuery 1.4.3 zu erhalten. Da jQuery 1.6: .data ('fooBar') das Attribut 'data-foo-bar' erhält.
James McCormack
4
@Zootius: Ja, die Plugin-Readme-Datei enthält einen Hinweis dazu: „Ab jQuery 1.4.3 werden standardmäßig .data()benutzerdefinierte data-*Attribute zugeordnet, wodurch dieses Plugin überflüssig wird. Es kann jedoch weiterhin für ältere Versionen von jQuery verwendet werden. “
Mathias Bynens
Wie wählt man nach jQuery 1.4.3 ein Objekt anhand des Werts seines Datenobjekts aus? Lässt II in diesem Beispiel ein Objekt mit Daten für customerID gleich 22 auswählen?
Reise
54
Auch wenn Sie nur an der Anwesenheit eines bestimmten Datenattributs interessiert sind, können Sie dies tun:$('[data-customerID]')
Darkside
7
Dies funktioniert nicht, wenn das Datenfeld von jquery (using .data()) festgelegt wurde, oder?
Martin R.
329

Für Leute, die googeln und allgemeinere Regeln für die Auswahl mit Datenattributen wünschen:

$("[data-test]")wird jedes Element auswählen , das lediglich hat das Datenattribut (nicht den Wert des Attributs Rolle). Einschließlich:

<div data-test=value>attributes with values</div>
<div data-test>attributes without values</div>

$('[data-test~="foo"]')wählt jedes Element aus, in dem das Datenattribut enthalten ist foo , das jedoch nicht genau sein muss, z.

<div data-test="foo">Exact Matches</div>
<div data-test="this has the word foo">Where the Attribute merely contains "foo"</div>

$('[data-test="the_exact_value"]')wählt jedes Element aus, bei dem der genaue Wert des Datenattributs lautet the_exact_value, zum Beispiel:

<div data-test="the_exact_value">Exact Matches</div>

aber nicht

<div data-test="the_exact_value foo">This won't match</div>
JTG
quelle
21
Gut. Beachten Sie, dass ~=Wörter mit Leerzeichen getrennt sind, während sie *=mit beliebigen Teilzeichenfolgen übereinstimmen.
Sam
Was ist mit ^Charakter?
Kuba44
1
@ kuba44 in der Tat können Sie auch ^ verwenden, als solches $('[data-test^=foo]')wählen Sie in diesem Fall alles, was mit foo beginnt, wie <div data-test="foo_exact_value">oder <div data-test="food">aber nicht<div data-test="seafoo">
JDuarteDJ
Umfassende Liste der Attributselektoren: Drafts.csswg.org/selectors-3/#attribute-selectors
user1460043
142

Wenn Sie verwenden, $('[data-whatever="myvalue"]')wird alles mit HTML-Attributen ausgewählt. In neueren jQueries scheint es jedoch so zu sein, dass $(...).data(...)beim Anhängen von Daten ein magisches Browser-Ding verwendet wird, das sich nicht auf das HTML auswirkt. Daher wird es nicht .findwie in der vorherigen Antwort angegeben erkannt .

Überprüfen Sie (getestet mit 1.7.2+) (siehe auch Geige ): (aktualisiert, um vollständiger zu sein)

var $container = $('<div><div id="item1"/><div id="item2"/></div>');

// add html attribute
var $item1 = $('#item1').attr('data-generated', true);

// add as data
var $item2 = $('#item2').data('generated', true);

// create item, add data attribute via jquery
var $item3 = $('<div />', {id: 'item3', data: { generated: 'true' }, text: 'Item 3' });
$container.append($item3);

// create item, "manually" add data attribute
var $item4 = $('<div id="item4" data-generated="true">Item 4</div>');
$container.append($item4);

// only returns $item1 and $item4
var $result = $container.find('[data-generated="true"]');
drzaus
quelle
1
aha - stellt sich heraus, dass jemand anderes dies auf stackoverflow.com/questions/4191386/…
drzaus
4
und bietet eine Lösung mit .filter hier
drzaus
22
Es verwendet ein magisches Browser-Ding und hat keinen Einfluss auf das HTML : Es gibt keine Magie;) learningjquery.com/2011/09/using-jquerys-data-apis
Tom Sarduy
1
Wenn Sie ein Datenattribut hinzufügen, das Sie später suchen müssen, verwenden Sie$item.attr('data-id', 10);
Pedro Moreira
77

Ich habe keine JavaScript-Antwort ohne jQuery gesehen. Hoffentlich hilft es jemandem.

var elements = document.querySelectorAll('[data-customerID="22"]');

elements[0].innerHTML = 'it worked!';
<a data-customerID='22'>test</a>

Die Info:

Sjoerd Pottuit
quelle
1
Danke dafür. Schön zu sehen, nicht jquery Lösungen.
Chuck
68

Um alle Anker mit dem Datenattribut auszuwählen data-customerID==22, sollten Sie das einschließen a, um den Umfang der Suche auf nur diesen Elementtyp zu beschränken. Das Durchführen von Datenattributsuchen in einer großen Schleife oder mit hoher Häufigkeit, wenn sich viele Elemente auf der Seite befinden, kann zu Leistungsproblemen führen.

$('a[data-customerID="22"]');
Travis J.
quelle
27

Native JS-Beispiele

Holen Sie sich die NodeList der Elemente

var elem = document.querySelectorAll('[data-id="container"]')

html: <div data-id="container"></div>

Holen Sie sich das erste Element

var firstElem = document.querySelector('[id="container"]')

html: <div id="container"></div>

Ziel ist eine Sammlung von Knoten, die eine Knotenliste zurückgibt

document.getElementById('footer').querySelectorAll('[data-id]')

html:

<div class="footer">
    <div data-id="12"></div>
    <div data-id="22"></div>
</div>

Ruft Elemente ab, die auf mehreren (ODER) Datenwerten basieren

document.querySelectorAll('[data-section="12"],[data-selection="20"]')

html:

<div data-selection="20"></div>
<div data-section="12"></div>

Holen Sie sich Elemente basierend auf kombinierten (UND) Datenwerten

document.querySelectorAll('[data-prop1="12"][data-prop2="20"]')

html:

<div data-prop1="12" data-prop2="20"></div>

Holen Sie sich Elemente, bei denen der Wert beginnt

document.querySelectorAll('[href^="https://"]')
Etoxin
quelle
Der Selektor für "get the first element" ist korrekt, stimmt aber nicht mit den anderen Beispielen überein - ich glaube, es fehlen "data-".
GuyPaddock
15

über die Methode Jquery filter ():

http://jsfiddle.net/9n4e1agn/1/

HTML:

<button   data-id='1'>One</button>
<button   data-id='2'>Two</button>

JavaScript:

$(function() {    
    $('button').filter(function(){
        return $(this).data("id")   == 2}).css({background:'red'});  
     });
Razan Paul
quelle
Hast du die Geige ausprobiert? Die Filtermethode ist nur ein weiterer Ansatz, um dasselbe zu erreichen. Dies kann nützlich sein, wenn Sie bereits über eine Reihe von Jquery-Objekten verfügen und nach Datenattributen oder anderen Elementen filtern müssen.
Razan Paul
Ich entschuldige mich, @Blizzard. Ich habe die falsche Antwort kommentiert. Fügte es jetzt rechts ein. #AlwaysALongDayAtWork
Peter Bishop
15

Die Konstruktion sieht folgendermaßen aus: $('[data-XXX=111]')Funktioniert in Safari 8.0 nicht .

Wenn Sie das Datenattribut folgendermaßen festlegen : $('div').data('XXX', 111), funktioniert dies nur, wenn Sie das Datenattribut direkt im DOM wie folgt festlegen : $('div').attr('data-XXX', 111).

Ich denke, das liegt daran, dass das jQuery-Team den Garbage Collector optimiert hat, um Speicherlecks und schwere Vorgänge bei der DOM-Neuerstellung für jedes Änderungsdatenattribut zu verhindern.

Anton Danilchenko
quelle
Dies hat mir sehr geholfen - wenn ich die Daten- oder Requisitenmethoden verwendet habe, hat die Auswahl durch $ ('... [data-x = "y"]') nicht funktioniert - ich habe stattdessen attr verwendet (es drückt die Attributänderung auf das DOM). Thx
Jarda
13

Damit dies in Chrome funktioniert, darf der Wert kein weiteres Anführungszeichen enthalten.

Es funktioniert zum Beispiel nur so:

$('a[data-customerID=22]');
user55318
quelle
4
Dies scheint falsch zu sein. Zumindest ist es jetzt nicht richtig. Ich habe gerade $ ('[data-action = "setStatus"]') verwendet. RemoveClass ('disabled'); in Chrome und es funktioniert perfekt.
Peter Bishop
Ich denke, es gibt keine Verwendung von "" innerhalb des Selektors, es kann verwendet werden als$('[data-action=setStatus]').removeClass('disabled')
Animesh Singh
6

Manchmal ist es wünschenswert, Elemente danach zu filtern, ob ihnen programmgesteuert Datenelemente zugeordnet sind (auch bekannt als nicht über Dom-Attribute):

$el.filter(function(i, x) { return $(x).data('foo-bar'); }).doSomething();

Das obige funktioniert aber ist nicht sehr lesbar. Ein besserer Ansatz ist die Verwendung eines Pseudo-Selektors zum Testen dieser Art von Dingen:

$.expr[":"].hasData = $.expr.createPseudo(function (arg) {
    return function (domEl) {
        var $el = $(domEl);
        return $el.is("[" + ((arg.startsWith("data-") ? "" : "data-") + arg) + "]") || typeof ($el.data(arg)) !== "undefined";
    };
});

Jetzt können wir die ursprüngliche Aussage in etwas fließenderes und lesbareres umgestalten:

$el.filter(":hasData('foo-bar')").doSomething();
XDS
quelle
1
Bei der ersten Lösung fehlt die return-Anweisung. Sie muss lauten: $ el.filter (Funktion (i, x) {return $ (x) .data ('foo-bar');}). DoSomething ();
Salma Gomaa
3

Nur um alle Antworten mit einigen Funktionen des 'Lebensstandards' zu vervollständigen - Inzwischen (in der HTML5-Ära) ist es möglich, dies ohne Bibliotheken von Drittanbietern zu tun:

  • reines / einfaches JS mit querySelector (verwendet CSS-Selektoren):
    • Wählen Sie die erste in DOM: document.querySelector('[data-answer="42"],[type="submit"]')
    • Wählen Sie alle in DOM aus: document.querySelectorAll('[data-answer="42"],[type="submit"]')
  • reines / einfaches CSS
    • einige spezifische Tags: [data-answer="42"],[type="submit"]
    • alle Tags mit einem bestimmten Attribut: [data-answer]oderinput[type]
Sven
quelle