Question

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

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

如果class =＆＃39; x＆＃39;存在，HTML将被相应地移动（不改变lis的内容或顺序）但我们在每5个元素的<ul>的分割/ couting中不会考虑它。

因此，可能会有不止一个类别=＆＃39; x＆＃39;在更新的HTML中，但最初每个<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>

根据特定计数移动

previous。添加div＆＃39;包装＆＃39;这些ul的课程删除任何遗留的标签

所需的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的评论。

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/

JQuery wrapAll，追加，删除以移动元素并添加div

1 个答案: