x元素後的jQuery包裝代碼

我有一個包含任意數量的LI的UL。我正在嘗試創建一些jQuery代碼來解析原始UL，並在每5個原始LI之後包裝一個UL和另一個LI。x元素後的jQuery包裝代碼

開始HTML：

<ul id="original_ul"> 
    <li class="original_li">..</li> 
    <li>..</li> 
    <li>..</li> 
    <li>..</li> 
    <li>..</li> 
    <li>..</li> 
    <li>..</li> 
    <li>..</li> 
    <li>..</li> 
    <li>..</li> 
</ul>

所需的HTML：

<ul id="processed_ul"> 

    <li class="new_wrap_li"> 

     <ul class="new_wrap_ul"> 

      <li class="original_li">..</li> 
      <li>..</li> 
      <li>..</li> 
      <li>..</li> 
      <li>..</li> 

     </ul><!-- end new wrap ul --> 

    </li><!-- end new wrap li --> 

    <li class="new_wrap_li"> 

     <ul class="new_wrap_ul"> 

      <li class="original_li">..</li> 
      <li>..</li> 
      <li>..</li> 
      <li>..</li> 
      <li>..</li> 

     </ul><!-- end new wrap ul --> 

    </li><!-- end new wrap li --> 

</ul><!-- end processed ul -->

我一直在使用。每個功能要經過LIS，並將它們添加到新的加工UL在臨時分區內......現在我只需要在每5個LIs周圍包裝新的LI和UL。

在此先感謝！

來源

2010-03-21 Al.

你可以這樣做：

var lis = $("#original_ul li"); 
for(var i = 0; i < lis.length; i+=5) { 
    lis.slice(i, i+5) 
    .wrapAll("<li class='new_wrap_li'><ul class='new_wrap_ul'></ul></li>"); 
}

這讓他們在同一#original_ul元素，但你可以只改變ID，如果這是必要的。這種方法生成你的ID中的問題有預留在頂部<ul>

來源

2010-03-21 01:39:57

哇，這是我第一次發佈過關於計算器我從未想象會收到如此多的有用答覆！非常感謝大家！我用Nick的解決方案，因爲它看起來最簡單，我甚至不需要我的臨時分區 - 我只是直接在原始列表上執行操作。非常感謝！ –

您可以使用循環。

例如：（未經測試）

while($('ul#original li').length) { 
    var newContainer = $('<li class="new_wrap_li"><ul class="new_wrap_ul" /></li>') 
     .appendTo('#processed_ul'); 


    $('ul#original li:lt(4)').detach().appendTo(newContainer.children('ul')); 
}

來源

2010-03-21 01:39:38 SLaks

某事的輸出HTML這樣就能做到：

$('#original_ul').find('li:nth-child(5n)').each(function(){ 
    $(this).prevAll('li').andSelf() 
     .wrapAll('<ul class="new_wrap_ul"></ul>'); 
}).end().find('ul').wrap('<li class="new_wrap_li"></li>') 
.find('li:first-child').addClass('original_li');

來源

2010-03-21 01:44:30 PetersenDidIt

jQuery('ul#original_ul').attr('id', 'processed_ul') 
    .find('li:nth-child(5n)').each(function() { 
     $(this).prevAll('li').andSelf() 
      .wrapAll('<li class="new_wrap_li"><ul class="new_wrap_ul"></ul></li>'); 
    });

來源

2010-03-21 02:12:38

x元素後的jQuery包裝代碼

回答

相關問題