美文网首页
每个标签中渲染N条数据

每个标签中渲染N条数据

作者: Darkdreams | 来源:发表于2018-12-18 15:35 被阅读0次

    如果在项目中需要一个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 += '<li>'
        for (var j = 0; j < sports[i].length; j++) {
          html += '<span>' + sports[i][j] + '</span> '
        }
      html += '</li>'
      text.innerHTML = html
      }
    
    成功

    相关文章

      网友评论

          本文标题:每个标签中渲染N条数据

          本文链接:https://www.haomeiwen.com/subject/dbklkqtx.html