将一个ul元素溢出到下一个

我在页面上有多个ul元素。我想人为地限制它可以包含的li元素的数量。当达到该限制时，我希望它溢出到页面上的下一个ul（直到它达到极限并溢出到下一个）。等等。将一个ul元素溢出到下一个

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

在上面的例子，我想它溢出限制到4个列表项，然后到下一个<ul>：

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

我想做到这一点使用jQuery。谢谢。

来源

2011-08-02 Robert

你的问题是缺乏细节。列在页面上的元素，还是你正在创建它们？页面上的div容器是？ – user113716

你是什么意思“一旦div达到一定数量”？ HTML不会限制子元素的数量（据我所知...浏览器可能，但规范不） – cdeszaq

好吧，而不是Divs我的意思是UL内的列出的元素。一旦达到4就会创建一个新的ul。这些元素是通过PHP生成的。我试图用JQuery来组织它们。 whoa downvotes：'（ – Robert

这应该通过每个UL，并在第一个非完整插入。

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

来源

2011-08-02 16:17:40 Andrew

谢谢你这个作品：D – Robert

假设你已经元素的一个这样的数组，试试下面的代码

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; 
});

来源

2011-08-02 16:11:31 ShankarSangoli

实际上更具体的这是可滚动的。 http://flowplayer.org/tools/demos/scrollable/index.html而不是divs im使用ul的和列出的项目。哪个php正在生成。现在它只是吐出列出的项目，我需要他们分组，所以它正确滚动。谢谢 – Robert

您可以轻松脱离模块化算术（'count =（count + 1）％4;'） –

感谢@Chris您的建议。 – ShankarSangoli

将一个ul元素溢出到下一个

回答

相关问题