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>
    <li>list item3</li>

  </ul>
</div>

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

 </ul>

我已经使用过这个脚本，但它只在li中显示2个div元素，我需要在li

中生成3个div

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

Answer 1

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

关键是使用3n-2来定位正确的元素（第1个，第4个等等），然后添加以设置2个下一个sibblings，然后换行。

你非常接近！

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

1 个答案: