Question

<p class="item" data-price="2" data-qty="1">item 1</p>
<p class="item" data-price="12" data-qty="4">item 2</p>
<p class="item" data-price="4" data-qty="2">item 3</p>

如何使用循环汇总上述项目的价格和数量？我知道如何获得有时数量的数量但是如何循环它们？

parseInt($('.item').attr('data-price')) * $('.item').attr('data-qty')

Answer 1

使用jQuery.each和sum

迭代

var sum = 0;
$(".item").each(function(){
  sum += this.dataset.price * this.dataset.qty;
});

$("h2").html("Result: " + sum);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p data-price="2" data-qty="1" class="item">item 1</p>
<p data-price="12" data-qty="4" class="item">item 2</p>
<p data-price="4" data-qty="2" class="item">item 3</p>


<h2> </h2>

Answer 2

这是调用HTML 5数据属性的正确方法。资料来源：How to select the HTML5 data attribute in jQuery?

var sum = 0;
$("p.item").each(function(i){
    var items = "p.item:eq(" + i + ")";
    sum +=  parseInt($(items).data("price"), 10) * parseInt($(items).data("qty"), 10);
});

$("h3").text(sum);

DEMO

循环并选择DOM中的每个元素？

2 个答案: