每个标签中渲染N条数据

如果在项目中需要一个div中渲染两条数据,接口返回的是一个length >= 1数据的数组,偶数两两一组,奇数最后一个单个成组,怎么办呢?

  //模拟接口返回的数据,一般接口返回的都是一堆对象组成的数组,方法是同样的。
  var data = ["足球", "篮球", "排球", "棒球", "网球", "羽毛球", "乒乓球"];

  var text = document.getElementById("text")

  var sports = [];  //声明一个新的空数组

  for(var i=0, len=data.length; i < len; i += 2){  //
    sports.push(data.slice(i,i+2));
  }
  console.log(sports)
  
生成的新数组sports

这样2个数据一组的多维数组就创建成功,下面渲染DOM就可以了。

  var html = '';

  for (var i = 0, len = sports.length; i < len; i++) {
    html += '
  • ' for (var j = 0; j < sports[i].length; j++) { html += '' + sports[i][j] + ' ' } html += '
  • ' text.innerHTML = html }
    成功

    你可能感兴趣的:(每个标签中渲染N条数据)