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（ example ）：

$('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的原因。

<强> DEMO

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

1 个答案: