如何根据使用jQuery的HTML元素的总高度来包装DIV中的所有HTML元素？

Question

我正在开发一个功能,我想在高度为1000px的div中显示元素.有来自DB的多个记录,但每个元素的高度不固定.当显示的记录高度超过1000px时,它们应包含在一个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个记录的总高度总计为940px,并且前4个记录的总高度为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>

我花了很多时间在它上面,但无法使它工作.:(

Answer 1

看看这个 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)所有 CSSmargins/paddings/borders等，因为在这个解决方案中它们将被计入示例中（我不知道这对你来说是否合适）