Question

我有很多元素，例如p，span，h1，h2。我不知道多少，因为它是动态的。我需要将元素分成高度为1000px的div。因此，我需要根据高度从一个数组创建多个页面。

for (let i = 0; i < items.length; i++) {
  $('.page').append(items[i]);
}

元素示例：items = [<ul class="ul1">..</ul>, .., .., <table>...</table>, ..,..,..]

items具有所有HTML元素，并且是动态的，可以包含10或100个元素。这个想法是返回带有1000px和元素的page1，page2，page3 ...等。现在，我只有一页包含所有内容。

Answer 1

您应该多解决一些问题，但有可能（适应您的情况）。

我假设items是jQuery元素的数组（所以我叫.height()）...

编辑：您的编辑显示了HTML元素数组，您可以将其转换为jQuery元素，例如进行items = items.map(item => $(item))

let pageInd = 1

// loop over each page
while (items.length) {

  let // stores the items of the current page
      curPageItems = []
  ,   // current page height
      height = 0

  // loop over each elements of the current page
  curPageElmts: while (items.length) {

    // get the next element
    const nextElmt = items.shift()

    // update height
    height += nextElmt.height()

    // break loop if the height goes over 1000px
    if (height > 1000) break curPageElmts

    // otherwise add it to the current page
    curPageItems.push(nextElmt)

  }

  // append those items in the corresponding page
  // (jQuery accepts appending arrays of elements)
  $(`.page-${pageInd++}`).append(curPageItems)

}

您还可以避免最后一行并将结果存储在新数组中。

根据高度将数组划分为多个数组

1 个答案: