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

【问题标题】：Using Jquery to wrap dynamic content with html tags使用 Jquery 用 html 标签包装动态内容
【发布时间】：2009-07-15 04:59:57
【问题描述】：

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

<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()... 但到目前为止没有成功。非常感谢任何解决方案或想法。

【问题讨论】：

您确定这是有效的标记吗？我认为 ul-li-li-li ul-li-li-li 会更有意义（在语义上也是如此）
是的，我想在每 3 个 li 元素之后插入一个

标签： jquery html dom

【解决方案1】：

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

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

【讨论】：

谢谢大家。这似乎是最有效的，同时完成了我所需要的。

【解决方案2】：

这是 cmets 中建议插入新 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>

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

【讨论】：

【解决方案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 设置为要划分的列表。）

【讨论】：

【解决方案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>');

【讨论】：