jquery - 将 <ul> 分成两个 div，一个用于第一个 child ，一个用于其余的

Question

使用 jquery 我想将 ul li 标签分成两个 div

例子

<ul>
<li>first</li>
<li>second</li>
<li>third</li>
<li>4th</li>
<li>5th</li>
<li>6th</li>
</ul>

到

  <div class="right">
    <ul>
        <li>first</li>
    </ul>
     </div>

<div class="left">
        <ul>
         <li>second</li>
         <li>third</li>
         <li>4th</li>
         <li>5th</li>
         <li>6th</li>
        </ul>
</div>

我将使用这种方法来滚动左侧部分，只有固定的右侧部分

Answer 1

尽管您的 html 是 invalid (li 不应包含在 div 中)您可以这样尝试，

var li = $('li');

li.filter(':first').wrap('<div class="right"></div>');
li.filter(':not(:first)').wrapAll('<div class="left"></div>');

DEMO

以下可以使您的html有效，

var li = $('li');

li.filter(':first').wrap('<div class="first"></div>').parent().wrap('<li></li>');
li.filter(':not(:first)').wrapAll('<div class="second"></div>').parent().wrap('<li></li>');

DEMO

根据您的新要求，您可以这样做，

var li = $('li');
$('ul').remove();

var leftLi = li.filter(':first').detach();
var rightLi = li.filter(':not(:first)').detach();

leftLi.appendTo($('body')).wrap('<ul></ul>').wrap('<div></div>');
rightLi.appendTo($('body')).wrapAll('<ul></ul>').wrap('<div></div>');

注意:您应该注意 ul 元素的 ids 和 classes，因为我不'知道html结构。你有没有注意到 .appendTo('body')，我只是为了演示目的而写的，但你必须决定元素应该附加到哪里。

DEMO