Frage Element nach Datenattribut auswählen


Gibt es eine einfache und unkomplizierte Methode, Elemente basierend auf ihren auszuwählen? data Attribut? Wählen Sie beispielsweise alle Anker aus, für die das Datenattribut benannt ist customerID was hat einen Wert von 22.

Ich zögere etwas zu benutzen rel oder andere Attribute, um solche Informationen zu speichern, aber ich finde es viel schwieriger, ein Element basierend darauf auszuwählen, welche Daten darin gespeichert sind.


832
2018-03-21 16:13


Ursprung


Antworten:


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

Sie sollten in der Lage sein, die *, aber wenn ich mich richtig erinnere, je nachdem, welche jQuery-Version Sie verwenden, kann dies zu fehlerhaften Ergebnissen führen.

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

Wenn Sie in Ihren jQuery-Skripten mit Datenattributen arbeiten, sollten Sie die Verwendung von HTML5 benutzerdefinierte Datenattribute-Plugin. Dadurch können Sie noch mehr lesbaren Code schreiben .dataAttr('foo')und führt zu einer kleineren Dateigröße nach der Verkleinerung (im Vergleich zur Verwendung von .attr('data-foo')).


1227
2018-03-21 16:14



Für Leute, die googlen und allgemeinere Regeln zum Auswählen mit Datenattributen wollen:

$("[data-test]") wählt irgendein Element aus, das lediglich hat das Datenattribut (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 ein Element aus, in dem das Datenattribut enthalten ist enthält  foo aber muss nicht genau sein, wie zum Beispiel:

<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 ein beliebiges Element aus, für das der genaue Wert des Datenattributs gilt the_exact_value, beispielsweise:

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

aber nicht

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

234
2018-03-07 20:03



Verwenden $('[data-whatever="myvalue"]') wählt alles mit HTML-Attributen, aber in neueren jQueries scheint es, dass wenn Sie verwenden $(...).data(...) um daten anzuhängen, verwendet es einige magische browserdinge und beeinflusst nicht den html, daher wird es nicht von entdeckt .find wie in der vorherige Antwort.

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

119
2017-07-26 15:57



Um alle Anker mit dem Datenattribut auszuwählen data-customerID==22sollten Sie die a den Umfang der Suche auf diesen Elementtyp beschränken. Die Suche nach Datenattributen in einer großen Schleife oder mit hoher Häufigkeit, wenn viele Elemente auf der Seite vorhanden sind, kann zu Leistungsproblemen führen.

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

57
2017-09-23 16:53



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:


41
2017-12-29 14:44



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

11
2017-07-08 23:26



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

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

Ich denke, das liegt daran, dass der jQuery-Team-Garbage-Collector optimiert wurde, um Speicherlecks und schwere Operationen bei der Neuerstellung von DOM auf jedem Änderungsdatenattribut zu verhindern.


9
2017-10-27 09:13



Damit dies in Chrome funktioniert muss der Wert angegeben werden nicht habe noch ein Paar Anführungszeichen.

Es funktioniert zum Beispiel nur so:

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

8
2017-12-28 15:48