jquery data-selector Problem

[mixmastertobsi]

Hallo,

habe ein Problem, was wahrscheinlich eine Kleinigkeit ist, aber ich sehe gerade den Fehler nicht.

Ich möchte mit jquery Elemente finden, die ein bestimmtes DATA-Attribut haben.

Ich habe folgendes probiert

$(".artikel").data("atr","1");
var el = $( " .artikel[data-atr*='']");
console.log(el.length);
var el = $( " .artikel[data-atr]");
console.log(el.length);

[Matthias Apsel]

Hallo mixmastertobsi,

Ich möchte mit jquery Elemente finden, die ein bestimmtes DATA-Attribut haben.

Ich habe folgendes probiert

$(".artikel").data("atr","1");
var el = $( " .artikel[data-atr*='']");
console.log(el.length);
var el = $( " .artikel[data-atr]");
console.log(el.length);

Schau doch mal in die Entwicklerkonsole, wie sich $(".artikel").data("atr","1"); im HTML äußert.

Bis demnächst
Matthias

[mixmastertobsi]

Also es ist völlig egal was ich mache.

Beispiel

$("*").data("atr","1");
var el = $( "*[data-atr]");
console.log(el.length); // ERGEBNIS 0
var el = $( "*");
console.log(el.length); // ERGEBNIS 5

[Matthias Apsel]

Hallo mixmastertobsi,

Also es ist völlig egal was ich mache.

$("*").data("atr","1");
var el = $( "*[data-atr]");
console.log(el.length); // ERGEBNIS 0
var el = $( "*");
console.log(el.length); // ERGEBNIS 5

also wird daraus eben nicht <p data-atr="1">...</p> wie du es erwartest. Schau doch mal, welches HTML generiert wird,

Bis demnächst
Matthias

[mixmastertobsi]

Hallo Matthias,

data-Attribute sind ja nicht im HTML sichtbar, wenn diese nachträglich mit JS generiert werden.

Wenn ich das Attribut mit $(el).data("atr"); ausgeben lasse, bekomme ich ein Resultat

[Rolf b]

Das ist eine jQuery Eigenschaft. Wenn data-atr im Markup enthalten ist, liefert .data('atr') den Inhalt des Data-Attributs. Andersrum erzeugt die Set-Methode .data('atr', 123) kein HTML-Attribut sondern speichert das jQuery-intern.

Wenn Du das data-Attribut unbedingt im Markup haben willst, um mit CSS oder jQuery-Selektoren darauf zugreifen zu können, solltest Du es mit .attr('data-atr', 123) probieren. Ich hoffe, dass jQuery das nicht wegoptimiert :)

Siehe auch hier

Rolf

[Gunnar Bittersmann]

@@Matthias Apsel

Schau doch mal, welches HTML generiert wird

HTML wird nicht generiert^[1]. Das DOM wird generiert und mit JavaScript geändert.

Die Unterscheidung könnte hier bedeutsam sein.

LLAP 🖖

---

1. es sei denn serverseitig mit PHP o.a. ↩︎