Group elements of ten lists items JQuery


/ Published in: jQuery
Save to your folder(s)

Quick and dirty but it does the job.


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.