for循环每20条放到一个DIV

Question

var data1 = [];
data1.length = 99
for (var i = 0; i < data1.length; i++) {
    for (var j = 0; j < data1.length; j++) {
        if (i % 20 == 0) {
            continue;
        }
        var data1DOM = '<div class="items">';
        data1DOM +=
            '<div div class="item" >' +
            '<div class="row1">' +
            '<div class="num">' + objData[i].userCode + '</div>' +
            '</div>' +
            '</div>';
            data1DOM += '</div>';
        $('#data1DOM').append(itemsBarDom);
    }
}

怎么写啊，大神帮帮忙。

Answer 1

// 数据分组
function chunk(arr, size) {
  var result = []
  for (var i = 0, len = arr.length; i < len; i += size) {
    result.push(arr.slice(i, i + size))
  }
  return result
}

// 创建列表项
function createBlock(tag, data) {
  const fragment = document.createDocumentFragment();
  const item = document.createElement("div")
  item.classList.add("item")
  item.innerText = data;
  fragment.append(item)
  return fragment 
}

const data = Array.from({length: 90}, () => 1);
const divGroup = chunk(data, 20)

// divGroup 二维数组，双重循环写业务dom

Answer 2

演示一个双层循环分组，看明白了就应该会写了

const data = [...Array(99).keys()].map(i => `xxxx${i + 1}`);
const step = 20;

const bigLength = Math.ceil(data.length / 20) * 20;
console.log("bigLength: ", bigLength);

for (let i = 0; i < bigLength; i += 20) {
    console.log("------------- group begin ------------");
    const end = Math.min(i + 20, data.length);
    for (let j = i; j < end; j++) {
        console.log("    ", data[j]);
    }
    console.log("------------ group end ---------------");
}