jquery 我需要将每两个li分开，并将它们附加到div中

nfg76nw0 于 2023-05-06 发布在 jQuery

关注(0)|答案(3)|浏览(167)

我有一个通用列表：

<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中创建的动态菜单。处理这种情况的最好办法是什么？

jquery

来源：https://stackoverflow.com/questions/4806687/i-need-to-split-every-two-lis-and-append-them-to-a-div

3条答案

按热度按时间

ukqbszuj1#

示例：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>开始，每隔一个<li>获取一次
each()(docs)迭代它们
next()(docs)获取下一个<li>
add()(docs)将当前的一个添加到下一个 （因此您有1&2，3&4等的组）
wrapAll()(docs)使用新的 Package 器 Package 它们。
eq()(docs)从集合中获取第一个
closest()(docs)遍历最近的 （新创建的）<div>祖先
unwrap()(docs)删除旧的<ul>
**编辑：**修改了我的答案，以处理奇数个<li>元素。

赞(0）回复(0）举报 2023-05-06

nvbavucw2#

您可以将.slice()方法与.wrap()方法结合使用。
像这样的东西会奏效的。

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

如果结果是奇数，就由你来处理。

赞(0）回复(0）举报 2023-05-06

yeotifhr3#

$(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/

赞(0）回复(0）举报 2023-05-06

我来回答

jquery 我需要将每两个li分开，并将它们附加到div中

3条答案

相关问题

热门标签

最新问答