Wie kann ich mit jQuery einen HTML-Datenwert als String erhalten?

Lesezeit: 4 Minuten

Ich habe folgendes in meinem Quell-HTML:

<li><a href="#" data-value="01">Test</a></li>

Ich möchte den Wert des Datenattributs erhalten, also verwende ich Folgendes:

var abc = $(this).data('value');

Dies funktioniert in Ordnung, ABER nicht, wenn eine führende Null vorhanden ist. Zum Beispiel hat das obige den Wert “1” in abc eingefügt.

Gibt es eine Möglichkeit, die “01” nicht in “1” umzuwandeln?

mögliches Duplikat von HTML-Daten und einer Zeichenfolge, die wie eine Zahl aussieht

– j08691

4. April 2012 um 16:41 Uhr
Ich bin mir nicht bewusst data-value ein korrektes Attribut von an sein <a> Element. Wäre es nicht besser, die zu verwenden rel Attribut?

– JakeJ

4. April 2012 um 16:48 Uhr
@JakeJ – Siehe ejohn.org/blog/html-5-data-attributes

– j08691

4. April 2012 um 17:21 Uhr
@ j08691 Ah, es scheint also HTML5 zu sein, wie ein schneller Scan zeigt. Wenn ich jedoch die Website entwickeln würde, würde ich mich von den meisten oder allen HTML5-Funktionen fernhalten (es sei denn, es gäbe einen eleganten Fallback), um alle alten Browser einzubeziehen. Danke für den Link, lerne jeden Tag etwas Neues 🙂 +1

– JakeJ

5. April 2012 um 9:11 Uhr

Juan Mendes

this.dataset.value;

// Or old school
this.getAttribute('data-value');

const a = document.querySelector("a");
console.log('Using getAttribute, old school: ', a.getAttribute('data-value'));
console.log('Using dataset, conforms to data attributes: ', a.dataset.value);

<ul>
  <li><a href="#" data-value="01">Test</a></li>
</ul>

Danke an @MaksymMelnyk für die Hinweise Datensatz

Danke, Florian, normalerweise antworte ich lieber mit direktem JS, wenn möglich. Wenn das OP jedoch bereits jQuery verwendet, attr möglicherweise eine bessere Option, da getAttribute in einigen Randfällen über Browser hinweg fehlerhaft sein kann, z. B. wenn das Attribut eines ist, das von DOM verwendet wird, z obj.disabled.

– Juan Mendes

4. April 2012 um 17:28 Uhr
Nun, Sie können verwenden this.dataValue dann 🙂 Ich kenne keinen Fehler in dieser Hinsicht.

– Florian Margaine

4. April 2012 um 17:33 Uhr
@FlorianMargaine: Davon hatte ich noch nie gehört. Es scheint nicht zu funktionieren jsfiddle.net/uV9dv

– Juan Mendes

4. April 2012 um 17:39 Uhr
@JuanMendes, @FlorianMargaine this.dataset.value wird diesen Wert haben.

– Maksym Melnyk

20. August 2015 um 15:26 Uhr

Sie können den attr()-Operator von jQuery verwenden:

var abc = $(this).attr('data-value');

Mike

Von dem jQuery data()-Dokumentationmüssen Sie anscheinend .attr() verwenden, um die automatische Typkonvertierung zu verhindern:

Es wird jeder Versuch unternommen, den String in einen JavaScript-Wert umzuwandeln (dazu gehören boolesche Werte, Zahlen, Objekte, Arrays und Null), andernfalls bleibt er ein String. Um das Attribut des Werts als Zeichenfolge abzurufen, ohne zu versuchen, es zu konvertieren, verwenden Sie die Methode attr(). Wenn das Datenattribut ein Objekt (beginnt mit „{“) oder ein Array (beginnt mit „[‘) then jQuery.parseJSON is used to parse the string; it must follow valid JSON syntax including quoted property names. The data- attributes are pulled in the first time the data property is accessed and then are no longer accessed or mutated (all data values are then stored internally in jQuery).

So, not to duplicate other answers, but rather to reinforce, the way to access the attribute without doing type conversion is:

var abc = $(this).attr('data-value');

$(this).attr('data-value');

This will return the string value with the leading 0.

have you tried?:

$(this).attr('data-value');

$(this).attr('data-value').toString();

$.attr doesn’t need toString, it already returns a string, even if it didn’t, calling toString would not bring back the original string if it had already been converted to a number.

– Juan Mendes

Apr 4, 2012 at 16:53

Shailesh Singh

Try :

this.data('value');

I think this is best way to get data attribute value.

$.attr doesn’t need toString, it already returns a string, even if it didn’t, calling toString would not bring back the original string if it had already been converted to a number.

– Juan Mendes

Apr 4, 2012 at 16:53

<article id="electric-cars" data-columns="3"data-index-number="12314" data-parent="cars">

</article>


const article = document.querySelector('#electric-cars');
 
article.dataset.columns // "3"
article.dataset.index-number // "12314"
article.dataset.parent // "cars"

Welcome to StackOverflow! While this answer may provide a solution for the OP’s needings, please, add an explanation in order to make it more understandable, not only for the OP, but also for the whole community

– xKobalt

Sep 7, 2020 at 7:52
please feel free to ask any questions regarding to that answer..! hope this will work..!

– tharu ramesh

Sep 7, 2020 at 11:18

11590800cookie-checkWie kann ich mit jQuery einen HTML-Datenwert als String erhalten?

#Abfrage #Javascript