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

在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 }

Answer 2

我认为这正是您所寻找的（根据您的评论）：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/

JavaScript基于XML值将类添加到div

2 个答案: