Question

如何将errors从li移至col-1？如果col-2显示的次数超过2次。

我的html结构

li

如果<div class="col-1"> <ul> <li>text1</li> <li>text2</li> <li>text3</li> <li>text4</li> </ul> </div>显示的时间超过2次，我就会得到这种结构。

li

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>

当li超过2时，将li从col-1移动到col-2

2 个答案: