通過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元素循環獲取屬性值

回答

相關問題