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

Question

我有一个由少量 HTML(图像、样式文本、表单等)组成的无序列表。列表中的项目数是 1 到 10 之间的变量。如何创建分页系统，以便在项目数为 5 或更少的情况下，所有列表项都显示在一个 DIV 中，并创建另一个 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

我认为这会在很短的时间内为您提供您想要的东西。它确保两个新的 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 );

编辑:编辑代码以添加解释性注释