Javascript渲染数字数组以跨越元素

Question

我想呈现以下一系列数字，如下所示：

1234567891234567892234567893234567894234567895

<span>1</span>
<span>2</span>
...
<span>9</span>
<span class="bold">1</span>
<span>2</span>
...

考虑这一点的最佳方法是什么？

1.字符总长度可以是动态的。现在我们可以将其视为上面的例子。

2.我希望一些字符如图所示以粗体显示。

实现相同的最佳方法是什么？

我计划创建一个包含单个字符的静态数组，如下所示：

1234567891234567892234567893234567894234567895

然后使用 jQuery 迭代并渲染它们。

PS：即使总长度可以改变，出现的数字顺序和粗体也始终相同。(我认为最多是 80 个字符。

Answer 1

var n='1234567891234567892234567893234567894234567895';
$.each(n.split(''),function(key,value){
$("#NU").append($('<span/>',{text:value, class:((!(key%9)&key>0)?"bold":"")}));
});

.bold{color:blue;font-weight:bold}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="NU"></div>

Answer 2

您可以使用forEach遍历数字数组，并使用append递归地将范围添加到resultdiv 中。

此外，您可以检查index是否可以被10整除，以添加bold条件。

var num = "1234567891234567892234567893234567894234567895".split('');
num.forEach((n, i) => {
if ((i + 1) % 10 === 0) {
$('#result').append(`<span class='bold'>${n}</span>`);
} else {
$('#result').append(`<span>${n}</span>`);
}
});

.bold {
font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result">
</div>

Answer 3

您可以创建两个字符串，第一个包含您想要的所有数字，第二个包含所有粗体数字，并在所有数字字符串上执行循环并检查数字是否在另一个上，如果是添加粗体标签 ig 不只是添加数字

Answer 4

var test = '1234567891234567892234567893234567894234567895';
$(document.body).append($.map(test.split(''), function(element, index){
var $span = $('<span>').text(element);

if (!((index + 1) % 10)) $span.addClass('bold');

return $span;
}));

.bold { font-weight: bold; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>