jquery - 使用 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 & 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
});