Question

我有一个数组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>';

Answer 1

您可以在数据块中拆分数组并相应地创建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>

Answer 2

检查这个简单的解决方案，它使用一个没有任何break语句的循环来创建你想要的HTML内容。

＆＃13;

function generateTemplate(items, splitPoint) {
  var template = '<ul>';

  for (var i = 0; i < items.length; i++) {
    if (items[i] === splitPoint) {
      template += '</ul><ul>';
    }

    template += '<li>' + items[i] + '</li>';
  }

  template += '</ul>';

  return template;
}

var container = document.getElementById('container');
var items = [1, 2, 3, 4, 5, 6];
var template = generateTemplate(items, 4);
container.innerHTML = template;

＆＃13;

ul {
  list-style-type: none;
  padding: 0px;
}
ul li {
  background-color: #E6E6E6;
  margin: 5px;
  padding: 5px;
}

＆＃13;

<div id="container">
</div>

＆＃13;

Answer 3

您可以使用这个简单的解决方案。

这使用slice提取前3个元素并运行递归调用，直到数组完成

＆＃13;

var a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]



const itrate = (arr) => {
  var firstThree = arr.slice(0, 3)
  var rest = arr.slice(3, arr.length)
  var ul = document.createElement('ul')
  firstThree.forEach((el) => {
    if (el) {
      li = document.createElement('li')
      li.innerHTML = el
      ul.appendChild(li)
    }
  })
  var node = document.getElementById('app')
  node.appendChild(ul)
  if (rest.length > 0)
    itrate(rest)
}

itrate(a)

＆＃13;

<div id="app"></div>

＆＃13;

Answer 4

只有在使用break或for循环时才能进行while次迭代，它们是标准的javascript迭代方式。

顺便说一句，如果你想在数组上模板，我认为Array.prototype.reduce是最适合你想要的方式......

＆＃13;

/**
 * @param {any[]} list
 * @param {int} breakIndex
**/
function compileHtmlLists(list, breakIndex) {
  
  return list
    .reduce(function(tpl, item, i, list) {
      var last = i === list.length - 1;
    
      item = "<li>" + item + "</li>";
    
      if(i === breakIndex) {
        item = "</ul><ul>" + item;        
      }
    
      if(last) {
        item += "</ul>";        
      }
    
    
      return tpl.concat(item);
    }, "<ul>")
  ;
}

var view = compileHtmlLists(
  [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
  5
)

console.log(view);

＆＃13;

每三次迭代后中断循环

4 个答案: