Retrieving HTML data-attributes using jQuery

Question

How can I get the values stored in the data attributes using jQuery ?

<div class="sm-tot" data-ts-speed="500" data-ts-interval="4000" data-ts-newVal="5000" >

What have you tried? What was the expected result? What was the actual result? Did you get any error messages? — Brian Driscoll, Mar 15 '12 at 13:33
see this : http://stackoverflow.com/questions/2048720/get-all-attributes-from-a-html-element-with-javascript-jquery — Paresh Balar, Mar 15 '12 at 13:38

score 157 · Answer 1 · edited May 09 '18 at 16:45

157

Use the jQuery .data() function:

var speed = $("yourdiv").data("ts-speed");

edited May 09 '18 at 16:45

Ethan

4,295
4
25
44

answered Mar 15 '12 at 13:34

Alytrem

2,620
1
12
13

2

this from jQuery 1.4.3 - on one project i have 1.4.2 =) – Andrey Vorobyev Jan 19 '14 at 10:24
2

this one doesn't work for me. The answer below, use `attr` instead of `data` works for me. – Carrie Jan 15 '16 at 22:46
@Morais last seen May 18, 2016 and still no check for the right answer. – Richard Ayotte Jun 10 '16 at 21:05
Maybe it didn't work for @Carrie because of older version. It works perfectly with jQuery 3.2.1. – Granny Aching Nov 01 '19 at 02:12

score 20 · Answer 2 · answered Mar 15 '12 at 13:37

20

You should be able to use the .attr function:

var speed = $("yourdiv").attr("data-ts-speed");

answered Mar 15 '12 at 13:37

Marcus Blomberg

473
2
6
10

score 11 · Answer 3 · answered Mar 15 '12 at 13:38

this shoud give you a idea how

html:

<div class="sm-tot" data-ts-speed="500" data-ts-interval="4000" data-ts-newVal="5000" > </div>

js:

$(document).ready(function(){
    var speed = $("div.sm-tot").data("ts-speed");
    var interval = $("div.sm-tot").data("ts-interval");
    $("div.sm-tot").append("speed: " + speed + "<br />");
    $("div.sm-tot").append("interval: " + interval + "<br />");

});

score 1 · Answer 4 · answered Mar 15 '12 at 13:42

<div class="sm-tot" data-ts-speed="500" data-ts-interval="4000" data-ts-newVal="5000" >

well, for this div u can get someone attr with jquery using code like this first follow this pattern

   if is Class $(".ClassName").attr('AttrName');
   if is Id  $('#IDname').attr('attrName')

if u wan get "data-ts-interval" u will use $('.sm-tot').attr("data-ts-interval");

score 0 · Answer 5 · edited Apr 05 '23 at 17:00

For getting data attributes using JQuery, you can make use of the attributes function (.attr()) and get the value of the required data attribute

let value = $(".sm-tot").attr("data-ts-speed"); // here you have the attr() method which gets the attribute value for only the first element in the matched set.

console.log(value); // here is the logged value of your class element

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="sm-tot" data-ts-speed="500" data-ts-interval="4000" data-ts-newVal="5000" >

Retrieving HTML data-attributes using jQuery

5 Answers5

Linked