jquery - 使用Jquery用html标签包裹动态内容

Question

我有一个返回项目动态列表的页面

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

我需要一种方法来在每组 3 个列表元素周围插入标签。基本上把上面的代码改成这样

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

我一直在尝试使用 Jquery Wrap()、WrapAll()、WrapInner()...但到目前为止没有成功。非常感谢关于此的任何解决方案或想法。

Answer 1

这是另一种动态生成 HTML 并遵循正确语义的方法，只允许 <li>直接在 <ul> 内的元素元素:

$(function(){
    const GROUP_COUNT = 3;
    var liElements = $('ul > li');
    var count = liElements.length;
    var html = '';

    for (var i = 0; i < count; i += GROUP_COUNT) {
        html += '<li><ul>';
        liElements.slice(i, i + GROUP_COUNT).each(function(){
            html += '<li>' + $(this).html() + '</li>';
        });
        html += '</ul></li>';
    }

    $('ul').html(html);
});

您可以更改 GROUP_COUNT按不同数量的元素分组。

此代码将转换:

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

进入:

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