使用JQuery循环遍历[same_class_name]元素，然后根据其值为每个元素附加一些文本

Question

我的HTML看起来像这样：

<li class="price">
  <em>29.00</em>
  <span class="shipping">Shipping:12.00</span>
  <span class="comments"></span>
</li>

<li class="price">
  <em>12.00</em>
  <span class="shipping">Shipping:4.00</span>
  <span class="comments"></span>
</li>

此模式在页面上重复约9-15次。

我想提取两个数字（例如，在第一个<li>中，它是29.00和12.00）并将它们相互添加（29 + 12 = 41），将结果乘以2，然后添加显示结果的新元素（在每个<li>之后）。

当然，每个<li>都应该有自己的结果。

----------------------------------------------- ------------------------------------------

终于让整个事情一起工作了！

（感谢dasfisch＆amp; Barmar）：

---

$(document).ready(function() {

var finalPrice = 0;

jQuery('.price').each(function(i) {
    var myProductPrice = parseFloat(jQuery(this).children('em').html());
    var myShippingPriceString = jQuery(this).children('.shipping').html();

//find the numeric portion of the string (decimal number)
var re = new RegExp();
re.compile("([0-9]+\.[0-9]*)");
var myShippingPrice = parseFloat(myShippingPriceString.match(re)[0]);

finalPrice = ((myProductPrice+myShippingPrice)*2).toString(); //your maths

jQuery(this).append('<li>  product price: ' + myProductPrice + '</li>');
jQuery(this).append('<li>  shipping price: ' + myShippingPrice + '</li>');
jQuery(this).append('<li>  ==============</li>');
jQuery(this).append('<li>  final price: ' + finalPrice + '</li>'); //change this to whatever HTML you want; the append is the important part
jQuery(this).append('<br><br>');
});

});​

Answer 1

为什么不使用jQuery的内置函数来遍历DOM？

试试这个：

var finalPrice = 0;

jQuery('.price').each(function(i) {
    var myProductPrice = parseFloat(jQuery(this).children('em').html());
    var myShippingPrice = parseFloat(jQuery(this).children('.shipping').html()); // you need to strip out the Shipping: text, too.

    finalPrice = ((myProductPrice+myShippingPrice)*2).toString(); //your maths

    jQuery('.yourUlElement').append('<li>' + finalPrice + '</li>'); //change this to whatever HTML you want; the append is the important part
});