Element nach Datenattribut auswählen

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>

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

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

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:

• Datenattribute

• .querySelectorAll ();

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

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

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.

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

Es funktioniert zum Beispiel nur so:

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

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

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]