使用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標記動態內容

回答

相關問題