在一個範圍中包裝每個字符

Question

我試圖在一個範圍中包裝每個數字。

這是我在哪裏。

<div class="numbers">12345</div> 
<div class="numbers">12345</div> 
<div class="numbers">12345</div> 

$('.numbers').each(function (index) { 
    var characters = $(this).text().split(""); 
    $(this).empty(); 

    $.each(characters, function (i, el) { 
    $(this).append("<span>" + el + "</span"); 
    }); 

}); 

我在哪裏可能會出現語法錯誤？

Answer 1

在$.eachthis不是在$('.numbers').each的this一樣的，所以你必須將它保存到一個變量有使用它。

$this = $(this); 
$this.empty(); 
$.each(characters, function (i, el) { 
    $this.append("<span>" + el + "</span"); 
}); 

http://jsfiddle.net/phA8q/

Answer 2

this現在你認爲它是在這裏

$(this).append("<span>" + el + "</span"); 

添加控制檯行中顯示出什麼this是

console.log(this); //String {0: "1", length: 1} 

你需要得到這個從外部範圍，將它存儲在一個vari中能夠並參考它。

var elem = $(this); 
var characters = elem.text().split(""); 
elem.empty(); 

$.each(characters, function (i, el) { 
    elem.append("<span>" + el + "</span"); 
}); 

Answer 3

您可以使用一個簡單的正則表達式像

$('.numbers').html(function (i, html) { 
    return html.replace(/(\d)/g, '<span>$1</span>'); 
}); 

演示：Fiddle

---

或者

$('.numbers').html(function (i, html) { 
    var chars = $.trim(html).split(""); 
    return '<span>' + chars.join('</span><span>') + '</span>'; 
}); 

演示：Fiddle