Question

所以我正在运行这个Javascript w / jQuery函数，它使用类“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>

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

的无论其
当我删除删除“unformatprice”类的行时：

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

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

Answer 1

document.getElementsByClassName()会返回HTMLCollection，这是＆＃34; 直播＆＃34;集合。

这意味着，当您.removeClass()时，元素将从h2s中删除。因此，递增h似乎跳过2个元素 - 1表示增量本身，1表示因为删除导致索引从h转移到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--) {
   // ...
}

Answer 2

正如我在评论中所说，原因可能是因为您要删除用于搜索元素的类，列表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
    }
}

演示：Fiddle

但是因为你使用的是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>')
    })
}

演示：Fiddle

Answer 3

由于您正在使用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");
    }
}

函数正好影响预期元素的一半

3 个答案: