javascript - 循环 dom 元素以获取属性值

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() 这样的值，但它不起作用。谁能帮助我获得想要的结果？

提前致谢:)

编辑理由: 我的问题有所不同，因为我想要一个简单的解决方案，而 @madalin 标记为解决方案/可能重复的问题不清楚，但使事情变得更难以理解。 @samir 建议我最简单的解决方案。谢谢@samir。

Answer 1

尝试使用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>