jquery - 文字列のスタイリング部分

Question

値札の2つの部分のスタイルを変えたいと思います。ドル額をセントより大きくしたいのですが。価格は動的な値なので、各パーツを個別にラップする必要があります。それ、どうやったら出来るの？

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/