使用jQuery和Javascript将无序列表拆分为多个div

Question

我有一个由HTML（图像，样式文本，表单等）组成的无序列表。列表中的项目数是介于1和10之间的变量。如何创建分页系统，以便所有列表项在一个DIV中显示（如果有5个或更少的项目），并创建另一个DIV并填充如果有超过5个项目溢出？

例如这里是元素的任意数的列表（在这种情况下，七）：

<ul> 
     <li><img src="photo.jpg" /></li> 
     <li><strong>TEXT TEXT TEXT</strong></li> 
     <li><img src="another_photo.jpg" /></li> 
     <li><strong>MORE TEXT TEXT TEXT</strong></li> 
     <li><a href="#" onClick="alert('Hello There');">Say Hello!</a></li> 
     <li>MORE STUFF</li> 
     <li>YET EVEN MORE STUFF</li> 
</ul> 

，这将是所产生的DIV

<div id="first_div"> 
     <ul> 
      <li><img src="photo.jpg" /></li> 
      <li><strong>TEXT TEXT TEXT</strong></li> 
      <li><img src="another_photo.jpg" /></li> 
      <li><strong>MORE TEXT TEXT TEXT</strong></li> 
      <li><a href="#" onClick="alert('Hello There');">Say Hello!</a></li> 
     </ul> 
</div> 
<div id="second_div"> 
     <ul> 
      <li>MORE STUFF</li> 
      <li>YET EVEN MORE STUFF</li> 
     </ul> 
</div> 

Answer 1

var lis=$('ul li'); 
var divuid=1; 
var i=0; 
while(lis.length>i){ 
    var lisPart=lis.slice(i,i+4); 
    i+=4; 
    $('<div id="div'+(divuid++)+'"></div>').append(lisPart).appendTo($('#my_container')); 
} 
$('ul li').remove(); 

中弹黑暗，还没有测试过......这样的事情呢？

Answer 2

可能是一个有点冗长，这一点应该这样做（未经测试）：

$(function() { 
    var threshold = 5; 

    // get the original list 
    var $ul = $("ul"); 

    // create the first container 
    var $div = $("<div id='first_div'><ul /></div>").appendTo('body'); 

    $("li", $ul).each(function(i) { 
     if(i < threshold) { 
     $("ul", $div).append($(this)); 
     } 
     else { 
     $overflowDiv = $("#second_div"); 

     // create the second container if it doesn't already exists 
     if(!$overflowDiv.length) { 
      var $overflowDiv = $("<div id='second_div'><ul /></div>").appendTo('body'); 
     } 
     $("ul", $overflowDiv).append($(this)); 
     } 
    }); 

    // remove the (now empty) list 
    $ul.remove(); 

}); 

Answer 3

我认为这将让你在你漂亮短期内想要什么。它确保这两个新的DIV落在原来的UL曾经是的DOM中。它也使用纯粹的jQ选择器功能，而不是循环和计数器。

现场演示：http://jsfiddle.net/JAAulde/3cRZw/1/

代码：

var UL = $('ul'), 
    upperLIs = UL.find('li:gt(4)'), //get list of LIs above index 4 (above 5th) 
    DIV1 = $('<div>').attr('id', 'first_div'); //we will definitely need this first DIV 

//Get the first DIV into the DOM right before the UL before any movement of UL 
//Ensure same DOM placement as we started with 
UL.before(DIV1); 

//Check for LIs above index 4 
if(upperLIs.length) 
{ 
    //Add those LIs to a new UL 
    //which itself is added to a new DIV 
    //which itself is added after DIV1 
    DIV1.after(
     $('<div>') 
      .attr('id', 'second_div') 
      .append(
       $('<ul>') 
        .append(upperLIs) 
      ) 
    ); 
} 

//Move the original UL to DIV1 with it's remaining 5 LIs 
DIV1.append(UL); 

编辑：编辑的代码添加解释性意见

Answer 4

包裹在一个div的<ul>。然后抓住最后5 <li>并把它们添加到一个新的<ul>内新<div>：

var ul = $("#myList").wrap($("<div>").attr("id", "first_div")); 
$("<div><ul>").attr("id", "second_div").insertAfter("#first_div") 
    .append(ul.find("li:gt(4)"));