jquery - 拆分数字并将每个数字放在单独的html元素中

Question

问题是我不知道如何打破第一个数字的循环并重新开始下一个数字。目前，一个span.nNumber具有两个数字的总位数 (123456)，而下一个span.nNumber仅包含来自另一个数字 (456) 的数字。目标是创建序列 123 和 456：

标记：

<span class='nNumber'>
 <span>1</span>
 <span>2</span>
 <span>3</span>
</span> 

<span class='nNumber'>
 <span>4</span>
 <span>5</span>
 <span>6</span>
</span>

JavaScript（示例）：

$('div .number').each(function(){
    var number = $(this).text();
    var i = 0;

    $(this).parent().prepend($("<span class='nNumber'></span>"));
    while(i<number.length)
    {
        $(this).closest('span').hide();
        var nChar = number.charAt(i);  
        i++;
        $('.nNumber').append('<span class="digit-'+nChar+'">'+nChar.split(" ").join(", ")+'</span>');
    }
});​

Answer 1

在您的while循环中，使用以下内容；

$(this).parent().find('.nNumber').append('<span class="digit-'+nChar+'">'+nChar+'</span>');

这样，您将始终修改您正在迭代的nNumber类。div如果您使用$(".nNumber")，您将获得类为 的所有元素nNumber，甚至是那些不在您当前的div. 这就是为什么第二次迭代.each()将额外的数字添加456到第一个span。

演示。