當li超過2時，將li從col-1移至col-2

Question

如何將li從col-1移至col-2？如果li顯示多於兩次。

我的HTML結構這裏

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

我已經得到這種類型的結構，如果li是顯示更多的則2time。

<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> 

Answer 1

$(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++; 
     } 


    } 
}); 

Answer 2

使用: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>