循環並選擇DOM中的每個元素？

-4

<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>

如何使用循環來總結上述項目的價格和數量？我知道如何在數量上獲得價值，但如何循環它們呢？使用jQuery.each循環並選擇DOM中的每個元素？

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

來源

2015-07-13 Lee shienlong

哪裏是你的代碼？ –

@RichardKho我被困在循環部分。 –

使用'jQuery.prototype.each'方法。 – undefined

迭代並總和

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>

來源

2015-07-13 01:41:32 Anoop

編輯完成後，結果返回錯誤。他在編輯 –

@TamilSelvan修正中錯過了p = tag中的class =「item」.. – Anoop

這裏是調用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

來源

2015-07-14 03:38:32

循環並選擇DOM中的每個元素？

回答

相關問題