Question

我有一组DOM元素，想要遍历它并获取每个元素节点的数据属性值。

[
  <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>
]

我尝试获取$('.something')[0].attributes()之类的值，但它不起作用。谁能帮助我获得理想的结果？

提前致谢：）

EditJustification：我的问题不同，因为我想要一个简单的解决方案，而@madalin标记的问题作为解决方案/可能的重复并不清楚，但让事情变得更加复杂。 @samir告诉我最简单的解决方案。谢谢@samir。

Answer 1

尝试使用data()

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

尝试使用这样的，

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

Answer 3

尝试使用attributes属性获取所有属性

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

Answer 4

.data()读取数据属性：

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

Answer 5

您可以将data()方法用于retrive data- * attribute

＆＃13;

$(".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
})

＆＃13;

<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>

＆＃13;

循环遍历dom元素以获取属性值

5 个答案: