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.

Answer 1

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> 

Answer 2

Try using like this,

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

Answer 3

Try the attributes property to get all the attributes

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

Answer 4

.data() reads data attributes:

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

Answer 5

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>