尝试理解wrapall()

Question

我已经读完了wrapall()，我认为这可能是我需要的解决方案。给出这样的结构：

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

我想用这个结构来结束：

<ul>
<div class="class1">
<li></li>
<li></li>
</div>
<div class="class2">
<li></li>
<li></li>
</div>
</ul>

我一点也不知道如何做到这一点。我读过一些wrapall的例子，但没有一个我可以用这种方式来适应

Answer 1

我建议：

$('ul li').slice(0,2).wrapAll('<ul></ul>').closest('ul').wrap('<li />');

这会导致：

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

JS Fiddle demo。

Answer 2

var a = $('li');
do { $(a.slice(0,2)).wrapAll('<li class="two"><ul></ul></li>'); }
while( (a = a.slice(2) ).length>0 );

这会导致：

<ul>
    <li class="two">
       <ul>
          <li>a1</li>
          <li>a2</li>
       </ul>
    </li>
    <li class="two">
       <ul>
         <li>b1</li>
         <li>b2</li>
       </ul>
    </li>
</ul>