当 li 大于 2 时，将 li 从 col-1 移动到 col-2 [重复]答案

【问题标题】：move li from col-1 to col-2 when li is more then 2 [duplicate]当 li 大于 2 时，将 li 从 col-1 移动到 col-2 [重复]
【发布时间】：2017-06-16 10:51:57
【问题描述】：

如何将我的 li 从 col-1 移动到 col-2？如果li 显示超过 2 次。

这里是我的html结构

<div class="col-1"> <ul> <li>text1</li> <li>text2</li> <li>text3</li> <li>text4</li> </ul> </div>

如果li 显示超过 2 次，我就会得到这种类型的结构。

<div class="col-1">
    <ul>
       <li>text1</li>
       <li>text2</li>
    </ul>
</div>
<div class="col-2">
    <ul>
       <li>text3</li>
       <li>text4</li>
    </ul>
</div>

【问题讨论】：

你用的是哪个css？
jsbin.com/reludileli/edit?html,js,output

标签： javascript jquery html

【解决方案1】：

使用:nth-child伪类和nextAll方法选择需要移动的元素，然后使用appendTo方法：

$("button").click(function(){
  var items = $(".col-1>ul>li:nth-child(2)").nextAll();
  if (items.length) {
    var newList = $("<ul>");
    items.appendTo(newList);
    var col2 = $("<div>").addClass("col-2").append(newList);
    $(".col-1").after(col2);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-1">
    <ul>
       <li>text1</li>
       <li>text2</li>
       <li>text3</li>
       <li>text4</li>
    </ul>
</div>
<button>Click Me!</button>

【讨论】：

【解决方案2】：

$(document).ready(function(){
   if($('.col-1 ul li').length > 2){
        var col = 2, i = 2;
        while($('.col-1 ul li').length > 2){
            var html = '<div class="col-'+ col +'"><ul></ul></div>';
            $('body div:last-child').after(html);
            for(var j=0;j<=1;j++){
                $('.col-'+ col +' ul').append($('.col-1 ul li:eq(' + i +')'));
            }
            col++;
        }


   }
});

【讨论】：