it-swarm.com.de

Element nach Datenattribut auswählen

Gibt es eine einfache und unkomplizierte Methode, um Elemente anhand ihres data-Attributs auszuwählen? Wählen Sie beispielsweise alle Anker mit dem Datenattribut customerID aus, das den Wert 22 hat. 

Ich bin etwas zögerlich, rel oder andere Attribute zu verwenden, um solche Informationen zu speichern, aber ich finde es viel schwieriger, ein Element basierend auf den darin gespeicherten Daten auszuwählen.

894
Hazem Salama
$('*[data-customerID="22"]');

Sie sollten in der Lage sein, * 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) nicht verwendet werden dürfen .

Wenn Sie in Ihren jQuery-Skripts häufig mit Datenattributen arbeiten, sollten Sie das Plugin - HTML5 für benutzerdefinierte Datenattribute verwenden. Auf diese Weise können Sie mit .dataAttr('foo') noch besser lesbaren Code schreiben, und nach der Minifizierung (im Vergleich zu .attr('data-foo')) wird die Dateigröße verringert.

1321
Mathias Bynens

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

$("[data-test]") wählt jedes Element aus, das nur hat das Datenattribut hat (unabhängig vom Wert des Attributs). 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, bei dem das Datenattribut enthältfoo vorhanden ist, aber nicht exakt 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, für das der genaue Wert des Datenattributs the_exact_value lautet. Beispiel:

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

aber nicht

<div data-test="the_exact_value foo">This won't match</div>
269
JTG

Mit $('[data-whatever="myvalue"]') wird alles mit HTML-Attributen ausgewählt, aber in neueren jQueries scheint es, wenn Sie zum Anhängen von Daten $(...).data(...) verwenden, ein magisches Browser-Ding verwendet wird und die HTML-Datei nicht beeinflusst wird. Daher wird sie nicht von .find erkannt, wie in previous angegeben Antworten .

Überprüfe (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"]');
129
drzaus

Um alle Anker mit dem Datenattribut data-customerID==22 auszuwählen, sollten Sie die Variable a angeben, um den Suchbereich auf diesen Elementtyp zu beschränken. Das Durchsuchen von Datenattributen in einer großen Schleife oder bei hoher Häufigkeit, wenn sich auf der Seite viele Elemente befinden, kann zu Leistungsproblemen führen.

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

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>

Info:

47
SPottuit

Native JS-Beispiele

Get NodeList of elements

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

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

Hole das erste Element

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

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

Ziel 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>

Elemente basierend auf mehreren (ODER) Datenwerten abrufen

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

html:

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

Elemente basierend auf kombinierten (UND) Datenwerten abrufen

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

html:

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

Elemente abrufen, bei denen der Wert mit beginnt

document.querySelectorAll('[href^="https://"]')
22
etoxin

via Jquery filter () Methode:

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'});  
     });
12
Razan Paul

Die Konstruktion wie folgt: $('[data-XXX=111]') funktioniert nicht in Safari 8.0

Wenn Sie das Datenattribut auf diese Weise festlegen: $('div').data('XXX', 111), funktioniert es nur, wenn Sie das Datenattribut direkt in DOM wie folgt festlegen: $('div').attr('data-XXX', 111).

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

10

Damit dies in Chrome funktioniert, muss der Wert nicht ein anderes Anführungszeichen haben. 

Es funktioniert zum Beispiel nur so:

$('a[data-customerID=22]');
9
user55318

Es ist manchmal wünschenswert, Elemente nach dem Element zu filtern, das mit ihnen verknüpft ist programmgesteuert (auch nicht über dom-Attribute bezeichnet):

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

Das Obige funktioniert, ist aber nicht sehr gut 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 auf etwas Fließenderes und Lesbareres umgestalten:

$el.filter(":hasData('foo-bar')").doSomething();
4
XDS

Um alle Antworten mit einigen Merkmalen des "Lebensstandards" zu vervollständigen - Inzwischen (in der html5-Ära) ist es möglich, dies auch ohne 3rd Party-Bibliotheken zu tun:

  • pure/plain JS mit querySelector (verwendet CSS-Selektoren):
    • wählen Sie die erste in DOM aus: document.querySelector('[data-answer="42"],[type="submit"]')
    • alles in DOM auswählen: 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] oder input[type]
0
Sven