JavaScript将基于XML值添加到div的类

Question

希望我可以正确解释这一点。在页面内的内容块上有一些XML（由自定义CMS调用）。我需要得到一个字段的价值，这是一个数字价格（999.99美元），然后，而不是像这样直接显示价格，我需要将其显示为图像。

主要问题是我无法嵌入任何字体，价格的样式需要精确，所以我留下了一个图像精灵0-9，然后创建空的div等待他们的额外类将添加数字的背景图像。

我不到兴奋:)

所以是有可能向上突破的数字串（我知道我能起飞的$和。），然后遍历到类添加一组的div （会说div的所有ID都是“价格”）？我可以很快地用PHP解决这个问题，但仅限于JavaScript，HTML和CSS，我不得不在框外思考。也只能使用jQuery版本1.7.2。

价格可能有3-5位数字，所以我想我会有5个设置div，然后添加一个“隐藏”类，如果只有3位数的价格。

想法/想法/建议？

---

琢磨一些评论，我认为这可能是更容易在默认情况下，添加一个隐藏类，然后将其删除，并添加额外的类每个号码后。

Answer 1

我认为这是你在找什么（根据您的评论）：http://jsfiddle.net/Jhmxc/3/

$(".price").each(function() { 
    var val = $(this).text() 
    $(this).empty(); 
    for(var i = 0; i < val.length; i++) { 
     if(/^\d+$/.test(val[i])) { 
      $numDiv = $("<div></div>").addClass("num"+val[i]); 
      $(this).append($numDiv); 
     } 
     else { 
      $(this).append($("<div>"+val[i]+"</div>").addClass("char")); 
     } 
    } 
}); 

我只为1-3添加了类......而那些类只添加了颜色，但是您可以看到我要去的位置。

编辑：

对于下面的评论......做到这一点？ http://jsfiddle.net/Jhmxc/4/

var val = "$231.2"; 
    var $output = $("<div></div>"); 
    for(var i = 0; i < val.length; i++) { 
     if(/^\d+$/.test(val[i])) { 
      $numDiv = $("<div></div>").addClass("num"+val[i]); 
      $output.append($numDiv); 
     } 
     else { 
      $output.append($("<div>"+val[i]+"</div>").addClass("char")); 
     } 
    } 
    $("#price").append($output); 

或函数中：http://jsfiddle.net/Jhmxc/5/

Answer 2

在JavaScript中，字符串是一个数组，这样你就可以通过这样的人物迭代：

var priceString = "$999.99"; 
for(var index in priceString){ 
    var c = priceString[index]; 
    //process the character here 
} 

编辑 感谢提意见......这里有一个更跨浏览器兼容的方式通过字符串中的字符循环：

var priceString = "$999.99"; 
for(var index = 0; index < priceString.length; index++) { 
    var c = priceString.charAt(index); 
    //process the character here 
}