通过dom元素循环获取属性值

我有一组DOM元素，并希望遍历它并获取每个元素节点的数据属性值。通过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。

来源

2016-09-16 Jyoti Duhan

您可以用'。每（）'函数。 – Samir

如果您的目标平台允许，我宁愿使用[数据集API]（https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset）。 – raina77ow

[使用jQuery获取元素的所有属性]可能的重复（http://stackoverflow.com/questions/14645806/get-all-attributes-of-an-element-using-jquery） – madalinivascu

尝试使用这样的，

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

来源

2016-09-16 12:00:27 Samir

感谢Samir提供了一个简单的解决方案。 –

我的荣幸.. :) – Samir

尝试attributes属性来获取所有属性

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

来源

2016-09-16 12:04:55 madalinivascu

.data()读取数据属性：

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

来源

2016-09-16 12:07:36

可以使用data()方法检索数据 - *属性

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

来源

2016-09-16 12:07:51

它将'category-name'转换为'categoryName' – Mohammad

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

来源

2016-09-16 12:09:34

通过dom元素循环获取属性值

回答

相关问题