Advanced Search

Group elements of ten lists items JQuery

/ Published in: jQuery
Save to your folder(s)
Quick and dirty but it does the job.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <ul>
  2. <li class="child">one</li>
  3. <li class="child">two</li>
  4. <li class="child">three</li>
  5. <li class="child">four</li>
  6. <li class="child">five</li>
  7. <li class="child">six</li>
  8. <li class="child">seven</li>
  9. <li class="child">eight</li>
  10. <li class="child">nine</li>
  11. <li class="child">ten</li>
  12. <li class="child">eleven</li>
  13. <li class="child">twelve</li>
  14. <li class="child">thirteen</li>
  15. <li class="child">fourteen</li>
  16. <li class="child">fifteen</li>
  17. <li class="child">sixteen</li>
  18. <li class="child">seventeen</li>
  19. <li class="child">eightteen</li>
  20. <li class="child">nineteen</li>
  21. <li class="child">twenty</li>
  22. </ul>
  23.  
  24. $(document).ready(function() {
  25.    $("#announcements ul").find("li:nth-child(10n+3)").removeClass("child").addClass("parent");
  26.  
  27.   var $everything = $('.parent,.child');
  28.   var splitAtHeaders = [];
  29.  
  30.   $everything.each(function(index){
  31.     var $item = $(this);
  32.     if ('parent'===$item.attr('className') || !splitAtHeaders.length) {
  33.       splitAtHeaders[splitAtHeaders.length] = [];
  34.     }
  35.     splitAtHeaders[splitAtHeaders.length-1].push($item);
  36.   });
  37.  
  38.   $.each(splitAtHeaders, function(){
  39.     var currentWrapper = null;
  40.     $.each(this, function(index){
  41.       if (0===index || !currentWrapper) {
  42.         currentWrapper = this.wrap('<ul class="ul_wrap"></ul>');
  43. 				$(this).before("10");
  44.       }
  45.       else {
  46.         currentWrapper.append(this);
  47.       }
  48.     });
  49.   });
  50. 	 });

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.