JQuery wrapAll, append, remove 移动元素并添加一个 div

Question

我正在尝试移动，并可能删除一些元素，同时用“div”包装更新的 HTML。我必须使用一个相等的计数，我已经能够计算（假设我想将它分成 5 个，直到有任何剩余的 li 标签）

尝试了 .wrapAll 和 .append、.remove 等，但在我更新之前，一些 HTML 已被删除。

如果 class='x' 存在，HTML 将被相应地移动（不改变 lis 的内容或顺序），但我们只是不考虑它在 <ul> 每 5 个元素的拆分/计算中。

因此，更新后的 HTML 中可能有多个 'li class='x'，但最初每个 <ul> 标记始终只有一个（并且它始终是原始 HTML 中的第一个元素）。

当前 HTML：

 <ul>   
        <li class="x">First</li>
        <li>One</li>
        <li>Two</li>
        <li>Three   </li>
        <li>Four</li>
        <li>5</li>
    </ul>
    <ul>    
        <li class="x">Second</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
    </ul>
    <ul>    
        <li class="x">Third</li>
        <li>16</li>
        <li>17</li>
    </ul>   

移动

先前基于特定计数。 向这些 ul 添加一个 div 'wrapper' 类 删除任何剩余的标签

所需的 HTML 结果：

<ul>    
    <li class="x">First</li>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>5</li>
</ul>
<ul>    
    <li class="x">Second</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>   
</ul>
<ul>    
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>   
</ul>   
<ul> 
    <li class="x">Third</li>
    <li>16</li>
    <li>17</li>
</ul>

Answer 1

试试这个：

更新：更改了代码以反映 OP 的 cmets。

function splitEm() {
    var $uls = $("ul");
    var $last = $uls.last();
    var $lis = $uls.children("li").detach();
    var points = [], count=0, prevIndex = 0;
    $.each($lis, function (index, item) {
        var i =  $(item).is(".x")?0:1;
        count += i;
        if(count%5 == 0 && i) {
            points.push(index - (prevIndex)?0:1;
            prevIndex = index;
        } 
    });

    if(prevIndex != $lis.length) {
        points.push($lis.length - prevIndex);
    }

    $.each(points, function(index, item) {
        var $curUL = null;
        if(index < $uls.length) { 
            $curUL = $uls.eq(index);
        }   else {
            $curUL = $("<ul/>").insertAfter($last);
            $last = $curUL;
        }
        $curUL.append($lis.splice(0, item));
    });
}

$(splitEm);

JsFiddle：http://jsfiddle.net/yd14gw5d/4/