Question

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

例如，这里是一个包含任意数量元素的列表（在本例中为7）：

 <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

我认为这会在很短的时间内得到你想要的东西。它确保两个新的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 2

将<ul>包裹在div中。然后获取最后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)"));

Answer 3

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 4

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

$(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();

});

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

4 个答案: