用4 li元素拆分每个ul

Question

需要快速帮助，使用jquery将每个ul分成4个li元素。

HTML代码：

<div class="slide-content">
    <ul class="container">
        <li>Ele 1</li>
        <li>Ele 2</li>
        <li>Ele 3</li>
        <li>Ele 4</li>
        <li>Ele 5</li>
        <li>Ele 6</li>
        <li>Ele 7</li>
        <li>Ele 8</li>
        <li>Ele 9</li>
        <li>Ele 10</li>
    </ul>
</div>

限制是......必须分开每个＆＃34; ul＆＃34;元素有4＆＃34; li＆＃34;内部为内容滑块。 Jquery脚本必须像HTML结构一样对齐。

<div class="slide-content">
    <ul class="container">
        <li>Ele 1</li>
        <li>Ele 2</li>
        <li>Ele 3</li>
        <li>Ele 4</li>
    </ul>
</div>

<div class="slide-content">
    <ul class="container">
        <li>Ele 5</li>
        <li>Ele 6</li>
        <li>Ele 7</li>
        <li>Ele 8</li>
    </ul>
</div>

<div class="slide-content">
    <ul class="container">
        <li>Ele 9</li>
        <li>Ele 10</li>
    </ul>
</div>

Answer 1

您可以遍历li元素，并将它们包装在新容器中，如

＆＃13;

＆＃13;

var $scs = $('.slide-content');
$scs.each(function() {
  var $sc = $(this),
    $lis = $sc.find('li'),
    $lst = $sc;
  for (var i = 4; i < $lis.length; i += 4) {
    $lst = $lis.slice(i, i + 4).wrapAll('<div class="slide-content"><ul class="container"></ul></div>').closest('div').insertAfter($lst)
  }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="slide-content">
  <ul class="container">
    <li>Ele 1</li>
    <li>Ele 2</li>
    <li>Ele 3</li>
    <li>Ele 4</li>
    <li>Ele 5</li>
    <li>Ele 6</li>
    <li>Ele 7</li>
    <li>Ele 8</li>
    <li>Ele 9</li>
    <li>Ele 10</li>
  </ul>
</div>
<hr />
<div class="slide-content">
  <ul class="container">
    <li>Ele 1</li>
    <li>Ele 2</li>
    <li>Ele 3</li>
    <li>Ele 4</li>
    <li>Ele 5</li>
    <li>Ele 6</li>
    <li>Ele 7</li>
    <li>Ele 8</li>
    <li>Ele 9</li>
    <li>Ele 10</li>
  </ul>
</div>
<hr />
<div class="slide-content">
  <ul class="container">
    <li>Ele 1</li>
    <li>Ele 2</li>
    <li>Ele 3</li>
    <li>Ele 4</li>
    <li>Ele 5</li>
    <li>Ele 6</li>
    <li>Ele 7</li>
    <li>Ele 8</li>
    <li>Ele 9</li>
    <li>Ele 10</li>
  </ul>
</div>
<hr />

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试使用.append() :lt()选择器，do... while循环将.slide-content内的元素追加到新的jQuery对象，而最后.container元素{{1}元素li是.length

4

do {

  $("body").append($("<div></div>", {
    "class": "slide-content",
    "html": $("<ul>", {
      "class": "container"
    }).append($(".container:first li:lt(4)"))
  }));

} while ($(".container:eq(-1) li").length === 4);

Answer 3

硬编码的答案看起来如此：

＆＃13;

＆＃13;

$(function() {
    //grab the original div element
    var orig = $('div.slide-content');
    
    //manipulate it
    orig
    //insert after it, a clone div-ul with last two li's
    .after( orig.clone().find('ul').html( orig.find('li:gt(7)') ).end() )
    //but you really want li's 5 - 8 to come after the original
    .after( orig.clone().find('ul').html( orig.find('li:gt(3)') ).end() );
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="slide-content">
    <ul class="container">
        <li>Ele 1</li>
        <li>Ele 2</li>
        <li>Ele 3</li>
        <li>Ele 4</li>
        <li>Ele 5</li>
        <li>Ele 6</li>
        <li>Ele 7</li>
        <li>Ele 8</li>
        <li>Ele 9</li>
        <li>Ele 10</li>
    </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

但是，如果li元素的数量未修复， AND ，如果有多个li元素组需要重新安排：

＆＃13;

＆＃13;

$(function() {
    //grab the original div elements
    var origALL = $('div.slide-content');
    origALL.each(function() {
        //grab current original div element
        var orig = $(this);
        //find number of li elements in current div element
        var nli  = orig.find('li').length;
        //find largest multiple of 4 less than nli and subtract 1
        var lm4  = Math.floor( nli / 4 ) * 4 - 1;
        //iterate and append appropriate li elements
        for(var i=lm4; i > 0; i = i - 4) {
            orig.after( orig.clone().find('ul').html( orig.find('li:gt(' + i + ')') ).end() );
        }
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="slide-content">
    <ul class="container">
        <li>Ele 1</li>
        <li>Ele 2</li>
        <li>Ele 3</li>
        <li>Ele 4</li>
        <li>Ele 5</li>
        <li>Ele 6</li>
        <li>Ele 7</li>
        <li>Ele 8</li>
        <li>Ele 9</li>
        <li>Ele 10</li>
        <li>Ele 11</li>
        <li>Ele 12</li>
        <li>Ele 13</li>
        <li>Ele 14</li>
        <li>Ele 15</li>
        <li>Ele 16</li>
        <li>Ele 17</li>
    </ul>
</div>
----------
<div class="slide-content">
    <ul class="container">
        <li>Ele 1</li>
        <li>Ele 2</li>
        <li>Ele 3</li>
        <li>Ele 4</li>
        <li>Ele 5</li>
        <li>Ele 6</li>
        <li>Ele 7</li>
        <li>Ele 8</li>
        <li>Ele 9</li>
        <li>Ele 10</li>
    </ul>
</div>

＆＃13;

＆＃13;

＆＃13;