将每个字符包装在一个跨度中答案

【问题标题】：Wrapping each character in a span将每个字符包装在一个跨度中
【发布时间】：2014-03-20 17:37:02
【问题描述】：

我正在尝试将每个数字包装在一个跨度中。

这就是我所在的位置。

<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");
    });

});

我的语法哪里出了问题？

【问题讨论】：

标签： jquery syntax

【解决方案1】：

$.each 中的this 与$('.numbers').each 中的this 不同，因此您必须将其保存到变量中才能在其中使用。

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

http://jsfiddle.net/phA8q/

【讨论】：

【解决方案2】：

this 不是你想的那样

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

添加控制台行显示this 是什么

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

您需要从外部范围获取 this，将其存储在变量中并引用它。

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

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

【讨论】：

非常感谢。解释真的很有帮助

【解决方案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

【讨论】：