다음 요소에 하나의 ul 요소를 오버플로합니다.

Question

페이지에 ul 요소가 있습니다. 나는 그것을 포함 할 수있는 li 요소의 수를 인공적으로 제한하려고합니다. 한계에 도달하면 페이지의 다음 ul으로 넘치고 싶습니다 (한도에 도달하여 다음 오버플로에 도달 할 때까지). 등등.

위의 예에서

<ul> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
</ul> 

, 나는 다음 <ul>에 다음 오버플로를 4 개 목록 항목으로 제한하고 것 :

<ul> 
    <li>5</li> 
    <li>6</li> 
    <li>7</li> 
    <li>8</li> 
</ul> 

I이 사용하는 jQuery를 수행하고 싶습니다. 고맙습니다.

Answer 1

이 각 UL 통해 이동하지 않아요 처음에 삽입해야보십시오.

function insert(el){ 
    $('ul').each(function(_, ul){ 
     if($(ul).children('li').length >=4) 
      return true; 
     $(ul).append(el); 
     return false; 
    } 
} 

Answer 2

이 같은 요소의 배열을 한 가정, 아래의 코드

var items = [1,2,3,4,5,6,7,8]; 

var count = 0; 
var ul; 
$.each(items, function(){ 
    if(count == 0) 
    ul = $("<ul />").appendTo(document.body); 

    ul.append("<li>"+this+"</li>"); 

    count = (count + 1) % 4; 
});