/ Published in: jQuery
Quick and dirty but it does the job.
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
<ul> <li class="child">one</li> <li class="child">two</li> <li class="child">three</li> <li class="child">four</li> <li class="child">five</li> <li class="child">six</li> <li class="child">seven</li> <li class="child">eight</li> <li class="child">nine</li> <li class="child">ten</li> <li class="child">eleven</li> <li class="child">twelve</li> <li class="child">thirteen</li> <li class="child">fourteen</li> <li class="child">fifteen</li> <li class="child">sixteen</li> <li class="child">seventeen</li> <li class="child">eightteen</li> <li class="child">nineteen</li> <li class="child">twenty</li> </ul> $(document).ready(function() { $("#announcements ul").find("li:nth-child(10n+3)").removeClass("child").addClass("parent"); var $everything = $('.parent,.child'); var splitAtHeaders = []; $everything.each(function(index){ var $item = $(this); if ('parent'===$item.attr('className') || !splitAtHeaders.length) { splitAtHeaders[splitAtHeaders.length] = []; } splitAtHeaders[splitAtHeaders.length-1].push($item); }); $.each(splitAtHeaders, function(){ var currentWrapper = null; $.each(this, function(index){ if (0===index || !currentWrapper) { currentWrapper = this.wrap('<ul class="ul_wrap"></ul>'); $(this).before("10"); } else { currentWrapper.append(this); } }); }); });