move li from col-1 to col-2 when li is more then 2

Question

how can i move my li from col-1 to col-2?. if li is display more then 2time.

my html structure here

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

i have get this type of structure if li is display more then 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

Use :nth-child pseudo-class and nextAll method to select elements that is need to be moved, then use appendTo method:

$("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>