तत्वों की x संख्या के बाद jQuery रैप कोड

Question

मेरे पास एक यूएल है जिसमें LIs की कोई संख्या शामिल है। मैं कुछ jQuery कोड बनाने की कोशिश कर रहा हूं जो मूल यूएल को पार्स करेगा और मूल एलआई के प्रत्येक 5 के बाद एक यूएल और दूसरी एलआई को लपेटेगा।

शुरू 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 --> 

मैं चाहते प्रत्येक समारोह का उपयोग कर फूल के माध्यम से जाना और उन्हें नए संसाधित उल में जोड़ने के लिए एक temp div के अंदर आयोजित ... अब मुझे हर 5 एलआईएस के आसपास नई एलआई और उल लपेटने की जरूरत है।

अग्रिम धन्यवाद !!

अल

Answer 1

आप ऐसा कर सकते हैं:

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 तत्व में रखती है, बल्कि यह है कि यदि आवश्यक है तो आप सिर्फ आईडी बदल सकता है। यह दृष्टिकोण सही उत्पादन एचटीएमएल आप शीर्ष <ul>

Answer 2

आप एक लूप का उपयोग कर सकते हैं।

उदाहरण के लिए: (untested)

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')); 
} 

Answer 3

कुछ पर आईडी से अलग सवाल में है उत्पन्न करता है इस तरह यह करना होगा:

$('#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'); 

Answer 4

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>'); 
    });