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包装代码

回答

相关问题