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>

Answer 2

这是解决方案，建议在注释中插入新的ul而不是div。

jQuery的：

var numbGroups = ($('ul li').length - 3)/3;
for(var index = 0; index < numbGroups ; index++) {
$('#ul'+index).after("<ul id='ul"+(index+1)+"'></ul>");
$('#ul' + (index+1)).append($('ul#ul0 li:gt(2):lt(3)'));
}

在ul

中插入Id

<ul id='ul0'>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
</ul>

编辑：对于较长的列表，旧的解决方案是错误的。更正了。

Answer 3

这个怎么样：

var originalList = $("ul");
var listsToAdd = originalList.children("li").length / 3 - 1;
for(var index = 0; index < listsToAdd; index++)
{
    originalList.before("<ul></ul>");
}
while (originalList.children("li").length > 3)
{
    originalList.children("li:lt(3)").appendTo("ul:empty:first");
}

它在我的测试中使用较大的列表并且不需要添加id（假设只有一个列表可以启动。否则，只需将originalList设置为要分割的列表。）

Answer 4

我会像之前建议的那样建议不要在ul中包含一些div元素。无论如何，这是我的建议：

for(var i = 2; i < $('ul li').length - 1; i += 3)
{    $('ul li').eq(i).after('</div><div>');    }
$('ul').wrapInner('<div></div>');

使用Jquery用html标签包装动态内容

4 个答案: