Question

我有一个通用列表

 <ul>
    <li>list item1</li>
    <li>list item2</li>
    <li>list item3</li>
    <li>list item4</li>
    <li>list item5</li>
   <li>list item6</li>
</ul>

但我想做的是

<div class="list">
<ul>
    <li>list item1</li>
    <li>list item2</li>
 </ul>
</div>

<div class="list">
<ul>
    <li>list item3</li>
    <li>list item4</li>
 </ul>
</div>

<div class="list">
<ul>
    <li>list item5</li>
    <li>list item6</li>
 </ul>
</div>

我无法向li添加类的原因是这是一个在Business Catalyst中创建的动态菜单，我可以使用任何建议来处理这种情况的最佳方法。

Best Tara

Answer 1

示例： http://jsfiddle.net/jBYqt/2/

$('ul > li:nth-child(2n-1)').each(function() {
    $(this).next().add(this).wrapAll('<div class="list"><ul></ul></div>');
}).eq(0).closest('div').unwrap();

nth-child-selector^(docs)从第一个

<li>

each()^(docs)遍历它们
next()^(docs)获得下一个<li>
add()^(docs)将当前的一个添加到下一个（因此您有1＆amp; 2,3＆amp; 4等组）
wrapAll()^(docs)用新包装器包装它们。
eq()^(docs)从集合中获取第一个
closest()^(docs)遍历最近的（新创建的） <div>祖先
unwrap()^(docs)删除旧的<ul>

编辑：修改了我处理奇数<li>元素的答案。

Answer 2

您可以将.slice()方法与.wrap()方法结合使用。

这样的事情可以解决问题。

$('li')
  .slice(2)
  .wrap('<div class="list" />');

当结果为奇数时，由你来处理。

Answer 3

$(document).ready(function(){
    var f=true;
    var l;
    $('ul>li').each(function(){
      if (f)
      {
        l=$('<div class="list"><ul/></div>');
        $(this).appendTo($('ul',l));
      }else{
        $(this).appendTo($('ul',l));
        $(l).appendTo('body');
      }
      f=!f;
    });
    $('body>ul').remove()
});

http://jsfiddle.net/x9Rq5/

我需要拆分每2个li并将它们附加到div

3 个答案: