0

所以我正在运行这个带有 jQ​​uery 的 Javascript 函数，它innerHTML使用类“”重新格式化所有 h1 元素的格式unformatprice。该类在重新格式化结束时被删除，以便在函数再次运行时不会再次重新格式化。这里是元素：

<h1 class="price unformatprice" id="price-13059062">CAD 25.20</h1>
<h1 class="price unformatprice" id="price-13059163">CAD 25.20</h1>

和功能：

function currencyreformat(){
    var h2s = document.getElementsByClassName("unformatprice");
    for(var h = 0; h < h2s.length; h++ ) {
        var d = h2s[h].innerHTML; 
        var d1 = d.slice(0,4);
        var d2 = d.replace(d1,"<span style='font-size:12px;'>CAD</span><strong>$"); 
        var d3 = d2.slice(0,-3); 
        var d4 = d2.replace(d3,"");
        h2s[h].innerHTML = d3+"<span style='font-size:15px;'>" + d4 + "</span></strong>";
        jQuery("#" + h2s[h].id).removeClass("unformatprice");
    }
}

格式化的元素应如下所示：

<h1 class="price" id="price-13059062">
  <span style="font-size:12px;">CAD</span>
  <strong>
    $25
    <span style="font-size:15px;">.20</span>
  </strong>
</h1>

但是当我运行该函数时，实际上只有一半的元素发生了变化，另一半没有变化，甚至保留了“unformatprice”类。

但是
，当我删除删除“unformatprice”类的行时：

jQuery("#" + h2s[h].id).removeClass("unformatprice");

所有元素都被格式化！我完全不知道为什么会这样，请参阅此小提琴以供参考：http: //jsfiddle.net/CqYCy/3/

4

3 回答 3

2

document.getElementsByClassName()返回一个HTMLCollection，这是一个“实时”集合。

这意味着，作为你.removeClass()，元素将从h2s. 因此，递增h似乎跳过了 2 个元素 - 1 个用于增量本身，1 个是因为删除导致索引从hto转移length - 1。

一种选择是将集合转换为非实时 Array的：

var h2s = document.getElementsByClassName("unformatprice");
h2s = Array.prototype.slice.call(h2s, 0);

您还可以从集合的末尾循环并递减，以便h保持小于受删除影响的索引：

for (var h = h2s.length - 1; h >= 0; h--) {
   // ...
}
于 2013-07-18T02:41:16.140 回答
1

正如我在评论中所说，原因可能是由于您要删除用于搜索元素的类，因此列表 h2s 正在被修改，因此您的索引出错了

尝试

jQuery(document).ready(function(){
    currencyreformat();//run function
});
function currencyreformat(){
    var h2s = document.getElementsByClassName("unformatprice");//getting unformatted elements
    while(h2s.length > 0){
        var d = h2s[0].innerHTML; 
        var d1 = d.slice(0,4);//getting just the "CAD " part
        var d2 = d.replace(d1,"<span style='font-size:12px;'>CAD</span><strong>$"); //Replacing "CAD " with "<span style='font-size:12px;'>CAD</span><strong>$"
        var d3 = d2.slice(0,-3); //get everything but the last three characters (the cent values)-".20"
        var d4 = d2.replace(d3,"");//removing everything but "0.20"
        h2s[0].innerHTML = d3+"<span style='font-size:15px;'>" + d4 + "</span></strong>";//adding the "CAD$25" to ".20" with the formatting applied.
        jQuery("#" + h2s[0].id).removeClass("unformatprice");//removing the unformatted
    }
}

演示：小提琴

但是由于您使用的是 jQuery，因此修复应该是，它有一个小错误，在 $ 和数字之间有一个空格。试图修复它

function currencyreformat(){
    $('.unformatprice').html(function(i, html){
        return html.replace(/^(.{3})\s(.*?)(.{3})$/, '<span style="font-size:12px;">$1</span><strong>$ $2<span style="font-size:15px;">$3</span></strong>')
    })
}

演示：小提琴

于 2013-07-18T02:41:08.660 回答
0

由于您使用的是 jQuery，因此使用“jQuery”完成工作的方式通常要轻松得多。

function currencyreformat(){
    $(".unformatprice").each(function(){
        var d = $(this).html(); 
        var d1 = d.slice(0,4);
        var d2 = d.replace(d1,"<span style='font-size:12px;'>CAD</span><strong>$"); 
        var d3 = d2.slice(0,-3); 
        var d4 = d2.replace(d3,"");
        $(this).html(d3+"<span style='font-size:15px;'>" + d4 + "</span></strong>");
        $(this).removeClass("unformatprice");
    }
}
于 2013-07-18T02:43:12.127 回答