jquery - 对字符串的各个部分进行样式设置

Question

我想为价格标签的两个部分设计不同的样式。我想让美元金额大于美分。价格是一个动态值，所以我必须分别包装每个部分。我怎么做？

var price = "12.95";

// desired result
<span class="dollar">12.</span><span class="cents">95</span>

我不认为我可以只使用 CSS，但我可以使用一些 jQuery。

Answer 1

尝试按.分隔符拆分价格，然后附加如下标签，

var priceTokens = price.split('.');
price = '<span class="dollar">' + priceTokens[0] + 
        '</span><span class="cents">.' + priceTokens[1] + '</span>';

Answer 2

split()句号上的字符串。

http://www.w3schools.com/jsref/jsref_split.asp

var price = '12.95';
var arr = price.split(".");

var dollar = arr[0];
var cent = arr[1];

// desired result
var str = '<span class="dollar">' + arr[0] + 
          '</span><span class="cents">' + arr[1] +'</span>';

Answer 3

有些不同：

var price = '12.95'.split('.');
$('<span/>').appendTo('body').addClass('dollar').html('$' + price[0]);
$('<span/>').appendTo('body').addClass('cents').html('.' + price[1]);

http://jsfiddle.net/WRrR7/1/