loop over dom element to get attributes value

Question

I have a set of DOM elements and want to loop over this and get the data-attribute values for each of these element nodes.

[
  <div class="something" data-prod-name="a" data-category-name="b" data-brand="ABC" data-product-id="137427"></div>,
  <div class="something" data-prod-name="b" data-category-name="b" data-brand="ABC" data-product-id="128830"></div>,
  <div class="something" data-prod-name="c" data-category-name="b" data-brand="ABC" data-product-id="128827"></div>,
  <div class="something" data-prod-name="d" data-category-name="b" data-brand="ABC" data-product-id="128824"></div>
]

I tried getting the values like $('.something')[0].attributes(), but it did not work. Can anyone help me in getting the desired result?

Thanks in advance :)

EditJustification: My question is different as I wanted a simple solution and the the question marked by @madalin as a solution/possible duplicate was not clear but making the things more complicated to understand. @samir advised me the simplest solution. Thanks @samir.

I'd rather use [dataset API](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset), if your target platforms allow it. — raina77ow, Sep 16 '16 at 11:57
Possible duplicate of [Get all attributes of an element using jQuery](http://stackoverflow.com/questions/14645806/get-all-attributes-of-an-element-using-jquery) — madalinivascu, Sep 16 '16 at 12:05

score 1 · Answer 1 · answered Sep 16 '16 at 12:09

Try using data()

    $('.something').each(function() {
      var data = $(this).data();
      $('body').append('<div>' +
        " brand: " + data.brand +
        " categoryName: " + data.categoryName +
        " prodName: " + data.prodName +
        " productId: " + data.productId);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="something" data-prod-name="a" data-category-name="b" data-brand="ABC" data-product-id="137427"></div>
<div class="something" data-prod-name="b" data-category-name="b" data-brand="ABC" data-product-id="128830"></div>
<div class="something" data-prod-name="c" data-category-name="b" data-brand="ABC" data-product-id="128827"></div>
<div class="something" data-prod-name="d" data-category-name="b" data-brand="ABC" data-product-id="128824"></div>

score 0 · Accepted Answer · edited Sep 16 '16 at 12:09

0

Try using like this,

$(document).ready(function() {
    $('.something').each(function(){
       var dataProdName = $(this).attr('data-prod-name');
       alert(dataProdName);
    });
});

edited Sep 16 '16 at 12:09

Chetan

944
5
22

answered Sep 16 '16 at 12:00

Samir

1,312
1
10
16

Thanks Samir for a simple solution. – Jyoti Duhan Sep 16 '16 at 12:13

madalinivascu · Answer 3 · 2016-09-16T12:13:11.937

0

Try the attributes property to get all the attributes

$('.something').each(function() {
  $.each(this.attributes, function(i,v) {
    console.log(v);
  });
});

edited Sep 16 '16 at 12:13

answered Sep 16 '16 at 12:04

madalinivascu

32,064
4
39
55

score 0 · Answer 4 · answered Sep 16 '16 at 12:07

0

.data() reads data attributes:

$(".something").each(function(i, el) {
    el = $(el);
    console.log(el.data("prod-name"));
    console.log(el.data("brand"));
});

answered Sep 16 '16 at 12:07

Alex K.

171,639
30
264
288

score 0 · Answer 5 · answered Sep 16 '16 at 12:07

You can use data() method for retrive data-* attribute

$(".something").each(function(){
console.log($(this).data()); // return object set of all data-*
console.log("product name: "+$(this).data('prod-name')) //return data-prod-name value
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="something" data-prod-name="a" data-category-name="b" data-brand="ABC" data-product-id="137427">A</div>
<div class="something" data-prod-name="b" data-category-name="b" data-brand="ABC" data-product-id="128830">B</div>
<div class="something" data-prod-name="c" data-category-name="b" data-brand="ABC" data-product-id="128827">C</div>
<div class="something" data-prod-name="d" data-category-name="b" data-brand="ABC" data-product-id="128824">D</div>

It convert `category-name` to `categoryName` – Mohammad Sep 16 '16 at 12:10 — Mohammad, Sep 16 '16 at 12:10

loop over dom element to get attributes value

5 Answers5