Element nach Datenattribut auswählen

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.

$('*[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')).

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>

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"]');

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:

• Datenattribute

• .querySelectorAll ();

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"]');

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://"]')

ü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'});  
     });

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.

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

Es funktioniert zum Beispiel nur so:

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

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();

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]