Question

我有一个带有dinamic编号的计数器，根据我的需要设置它的样式我需要在标签中包装每个数字。

我的代码：

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

我需要：

<div class="test"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span></div>

用jQuery做任何简单的解决方案吗？

Answer 1

var s = $(".test").html();
var result = "";

for(int i=0;i<s.length;i++){
    result += "<" + "span>" + s[i] + "</" + "span>";
}

$(".test").html(result);

我将<span>代码分开，因为我不确定javascript是否允许它们...

Answer 2

快速而肮脏的方式：

var characters = $("div").text().split("");

$("div").empty();

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

http://jsfiddle.net/h6mJh/1/

Answer 3

var text = $('.text').text();
for(var i = 0; i < text.length; i++)
{
   $('.text').append('<span>' + text[i] + '</span>);
}

这仅适用于0-9号码。如果你并排没有这样的分隔符，你将无法处理两位数或更大的数字。不确定是否存在这种情况的可能性。

Answer 4

James Montagne的answer但更好一点。

var chars = $("div").text().split("");
$("div").empty();
$.each(chars, function (i, el) {
    var span = document.createElement('span');
    span.innerText = chars[i];
    $("div").append(span);
});

如何用jQuery包装标签内的每个符号？

4 个答案: