使用jQuery包裹HTML标记动态内容

我有一个返回的项目使用jQuery包裹HTML标记动态内容

<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的包裹（），WrapAll（），WrapInner（）...但没有成功为止。非常感谢任何解决方案或想法。

来源

2009-07-14 Dan

你确定这是有效的标记吗？我会认为ul-li-li-li ul-li-li-li会更有意义（在语义上也是） – 2009-07-14 19:03:59

是的，我想在每个3 li元素之后插入一个

Dan

2009-07-14 19:09:19

下面是动态地生成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>

来源

2009-07-14 20:42:57

谢谢大家。这似乎是最有效的，同时完成我所需要的。 – Dan 2009-07-15 14:54:14

这是解决方案是在评论中建议插入新的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

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

编辑：老办法是错误的，较长的列表。纠正了这一点。

来源

2009-07-14 19:36:22

这个怎么样：

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到列表是划分）

来源

2009-07-14 20:24:21

我会像以前建议，建议不包括UL里面一些div元素。无论如何，这里是我对此的建议：

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

来源

2009-07-14 20:59:57

使用jQuery包裹HTML标记动态内容

回答

相关问题