javascript - 根据高度将数组分成多个数组

Question

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

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

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

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

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)

}

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