javascript - JQuery - 排序后以 50 个为一组包装 div

Question

我有以下html：

<div class="backpack_all"> //wrapper for all on screen content
    ...
    <div class="backpack"> //main content to display
        <div class="item1">
        <div class="item2">
        <div class="item3">
        ...etc

我将拥有这种格式的 200-500 件物品。我还积极地按这些项目的各种属性对这些数据进行排序。未排序时，它们由包含 50 个项目的 class="backpack_partition" 以 50 个为一组进行分区。为了对它们进行排序，我必须从它们各自的分区中解开所有项目。如何使用 jquery/javascript 重新包装它们？

Answer 1

求助于一些好的老式 JS。

var divs = $('.backpack > .item');
for(var i = 0; i < divs.length; i+=50) {
    divs.slice(i, i+50).wrapAll("<div class='backpack_partition'></div>");
}

Answer 2

你可以试试wrapAll()方法：

围绕匹配元素集中的所有元素包裹一个 HTML 结构。

$('.backpack').wrapAll('<div class="backpack_all" />')

或者：

$('.backpack:first').nextUntil('.backpack:eq(50)').end().wrapAll('<div class="backpack_all" />')