Question

我想渲染以下一系列数字，如下所示：

123456789的 1 23456789的 2 23456789 3 23456789的 4 23456789的 5

<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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以使用forEach遍历数字数组，并使用append以递归方式将范围添加到result div。

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

＆＃13;

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

＆＃13;

.bold {
  font-weight: bold;
}

＆＃13;

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

＆＃13;

Answer 3

你可以创建两个字符串，第一个字符串包含你想要的所有数字，第二个字符串包含所有粗体数字，并在所有数字字符串上循环并检查数字是否在另一个字符串上是否添加粗体tag ig isn只是添加数字

Answer 4

＆＃13;

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

＆＃13;

.bold { font-weight: bold; }

＆＃13;

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

＆＃13;

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

4 个答案: