如何在元素上设置数据属性

Question

愚蠢的问题，但。。。我有一个div，它看起来像这样：

<div class="container">
<div class="abc" />
<div class="abc" />
<div>                           

我可以像设置<div class="abc" value={2}></div>一样设置div.abc的值吗？然后使用js通过迭代div.container的子项来计算总数？

Answer 1

编辑：正如伊舍伍德在评论中提到的那样。这个答案只是javascript解决方案，并不是针对reactjs的，因为我错过了带有reactjs标签的问题。请参阅推荐答案如何使用react动态设置HTML5数据属性？以获得更好的解决方案！

您可能正在查找html数据属性

<div class="container">
<div data-your-prop="1" />
<div data-your-prop="1.5" />
<div data-your-prop="2" />
<div>                          

例如1

const divs = document.querySelectorAll('.container div[data-your-prop]')
divs.forEach(function (el, index) {
console.log(el.dataset.yourProp)
})

例如2

const divs = document.querySelectorAll('.container div[data-your-prop]')
let totalInt = 0
let totalFloat = 0
divs.forEach(function (el, index) {
totalInt += parseInt(el.dataset.yourProp)
totalFloat += parseFloat(el.dataset.yourProp)
});
console.log(totalInt)
console.log(totalFloat.toFixed(2))
// yields
//
// 4
// "4.50"

注意

(data-(属性名称被附加到el.dataset，并且在dom中定义的名称被规范化为有效的json属性。