javascript - 每三次迭代后中断循环

我有一个数组arr = [1, 2, 3, 4]。

我要列印

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
<ul>
  <li>4</li>
</ul>

因此，我将需要在每个第三个元素之后中断循环。

let s = '<ul>';
arr.forEach(el => {
  s += '<li>' + el + '</li>';
});
s += '</ul>';

最佳答案

您可以将数组拆分为多个块，并相应地创建HTMLString，而不是破坏循环。

var arr = [1, 2, 3, 4, 5];

function getULStructure(arr) {
  let s = '<ul>';
  arr.forEach(el => {
    s += '<li>' + el + '</li>';
  });
  s += '</ul>';
  return s
}

function createHTMLString(arr, count) {
  var _htmlString = ''
  while (arr.length > 0) {
    _htmlString += getULStructure(arr.splice(0, count))
  }
  return _htmlString
}

var _html = createHTMLString(arr, 3);
document.querySelector('.content').innerHTML = _html

<div class="content">
</div>