如何使用jQuery将所有HTML元素包装在DIV中，具体取决于这些HTML元素的总高度

How to wrap all HTML elements in a DIV depending on total height of those HTML elements using jQuery?

本文关键字：HTML 元素 取决于 高度 DIV jQuery 何使用 包装      更新时间：2023-09-26

我正在开发一个功能，我想在高度为 1000px 的div 中显示元素。有多个记录来自数据库，但每个元素的高度不是固定的。当显示的记录高度超过 1000 像素时，它们应包装在一个 DIV 中。接下来的记录应该包装在另一个 DIV 中，直到这些元素的总高度达到 1000px。记录不应因为单独的 DIV 而在两者之间中断。

例如：

<div class="record">..</div>
<div class="record">.....</div>
<div class="record">...</div>
<div class="record">....</div>
<div class="record">..</div>

如果前 3 个 .record 的总高度总计为 940px，前 4 个 .record 的总高度为 1100px，jQuery 应将代码转换为：

<div class="page>
    <div class="record">..</div>
    <div class="record">.....</div>
    <div class="record">...</div>
</div>
<div class="page>
    <div class="record">....</div>
    <div class="record">..</div>
</div>

我花了很多时间在上面，但无法让它工作。 :(

看看这个jsfiddle

但要详细解释一下：

一些声明：

var $records = $('.record'), // get all records
    total = 0, // current height of all elements
    group = 0, // iterator for groups
    limit = 200; // your limit in px for each .page (put your 1000 here)

第一个循环：

$records.each(function() {
    var $record = $(this);
    total += $record.outerHeight(true); // sum height of all records
    // when total height overflow your limit 
    // reset total and set next group index
    if (total > limit) {
        total = $record.outerHeight(true);
        group++;
    }
    // assign group index to each record
    $record.attr('data-group', group);
});

第二个循环：

// iterate on all groups and using jQuery .wrappAll()
// wrap all records from one group to .page element
for (var i = 0; i <= group; i++) {
    $('[data-group="' + i + '"]').wrapAll('<div class="page"></div>')
}

更多关于 jQuery .wrappAll（）

注意.outerHeight(true)和所有 CSS margins/paddings/borders等，因为在此解决方案中它们将被计入示例（我不知道这对您来说是否可以）

相关文章：