Get all data attributes of an element and their value in jquery

Question

I have a element defined as follows:

<span class="road-btn js-road-btn" data-lat-s=' + row.LatL + ' data-lng-s=' + row.LongL + ' data-lat-e=' + row.LatD + ' data-lng-e=' + row.LongD +'> <i class="icon-pin"></i ></span >

I have performed a click event on this element as :

$('.js-road-btn').on('click', function () {
    var latS = $(this).attr('data-lat-s');
    var longS = $(this).attr('data-lng-s');
    var latE = $(this).attr('data-lat-e');
    var longE = $(this).attr('data-lng-e');
});

Instead of getting each attribute separately, I want to retrieve all the attributes values as a whole. Then I access the properties separaretly. How can I achieve this in jquery ?

see https://stackoverflow.com/questions/4187032/get-list-of-data-attributes-using-javascript-jquery — Mohsen Zia, Apr 25 '18 at 08:33
Possible duplicate of [Get list of data-\* attributes using javascript / jQuery](https://stackoverflow.com/questions/4187032/get-list-of-data-attributes-using-javascript-jquery) — freedomn-m, Apr 25 '18 at 08:35

Zakaria Acharki · Answer 1 · 2018-04-25T08:40:46.013

4

You could use the jQuery method .data() like :

$(this).data(); //Will return the set of all the data-* attributes

$('.js-road-btn').on('click', function() {
  var attributes = $(this).data();

  console.log(attributes);

  alert(attributes.lngE);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span class="road-btn js-road-btn" data-lat-s='1' data-lng-s='2' data-lat-e='3' data-lng-e='4'> Click me </span >

edited Apr 25 '18 at 08:40

answered Apr 25 '18 at 08:33

Zakaria Acharki

66,747
15
75
101

I am getting `[object Object]` – crazydev Apr 25 '18 at 08:37
Are you using `alert()` to output the result ? – Zakaria Acharki Apr 25 '18 at 08:38
1

`console.log` Its ok.. I just had to append the properties with the data. – crazydev Apr 25 '18 at 08:43
What I am doing is : `var path = $(this).data();` Then accessing the attribute like : path.data('lat-s') Its throwing : `path.data is not a function` Could you please help ? – crazydev Apr 25 '18 at 09:10
You should get it like `path.latS` instead – Zakaria Acharki Apr 25 '18 at 09:38

score 2 · Answer 2 · answered Apr 25 '18 at 08:34

2

As the values are all stored in data-* attributes, you can use data() (with no arguments) to retrieve them all in a single object:

$('.js-road-btn').on('click', function() {
  var data = $(this).data();
  console.log(data);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="road-btn js-road-btn" data-lat-s="lat-s" data-lng-s="lng-s" data-lat-e="lat-e" data-lng-e="lng-e"> 
  Click me
</span>

answered Apr 25 '18 at 08:34

Rory McCrossan

331,213
40
305
339

What I am doing is : `var path = $(this).data();` Then accessing the attribute like : `path.data('lat-s')` to log the value. Its throwing : `path.data` is not a function Could you please help ? – crazydev Apr 25 '18 at 09:12
`path` is an object, so you just access its properties. It has no methods. `path.latS` should work for you – Rory McCrossan Apr 25 '18 at 09:12
What if I want to specify the attribute name ? – crazydev Apr 25 '18 at 09:14
Not sure what you mean – Rory McCrossan Apr 25 '18 at 09:15
Like `'lat-s'`. – crazydev Apr 25 '18 at 09:17
Ah, I see. That's not possible as the keys gets transcribed to remove `-` characters. For a better explanation of this [see this answer](https://stackoverflow.com/a/22753630/519413). If you did want that behaviour then you'd need to create the logic to scrape the attributes yourself. – Rory McCrossan Apr 25 '18 at 09:19

Get all data attributes of an element and their value in jquery

2 Answers2