Adding
after every 5th
with jQuery

Question

I have a list and I need to add </ul><ul class="list"> after every 5th li so the list looks like this

    <ul>
  <li><a>Test Page</a></li>
  <li><a>Test Page</a></li>
  <li><a>Test Page</a> </li>
  <li><a>Test Page</a></li>
  <li><a>Test Page</a></li>
  <li><a>Test Page</a></li>
  <li><a>Test Page</a></li>
  <li><a>Test Page</a></li>
  <li><a>Test Page</a></li>
  <li><a>Test Page</a></li>
  <li><a>Test Page</a></li>
  <li><a>Test Page</a></li>
  <li><a>Test Page</a></li>
</ul>

and ends looking like this

<ul>
  <li><a>Test Page</a></li>
  <li><a>Test Page</a></li>
  <li><a>Test Page</a> </li>
  <li><a>Test Page</a></li>
  <li><a>Test Page</a></li>
</ul>
<ul class="list">
  <li><a>Test Page</a></li>
  <li><a>Test Page</a></li>
  <li><a>Test Page</a></li>
  <li><a>Test Page</a></li>
  <li><a>Test Page</a></li>
</ul>
<ul class="list">
  <li><a>Test Page</a></li>
  <li><a>Test Page</a></li>
  <li><a>Test Page</a></li>
</ul>

my current jQuery is not working because it is switching the order of the ul's

var ulVal = jQuery('</ul><ul class="links">');
jQuery('ul.col1 li:nth-child(5n)').after(ulVal)

What am I doing wrong?

I mean mine add the ul in this order `
` instead of the way I want it like this `
` — Ashlee, Nov 09 '11 at 16:12
@Ashlee Just for reference, jQuery is not actually switching the order of the opening and closing tags you pass it. Instead, you are [creating a new element with jQuery](http://stackoverflow.com/questions/327047/what-is-the-most-efficient-way-to-create-html-elements-using-jquery). Try it out - remove the closing from that statement and you will notice that you still get exactly the same behavior. — David Brainer, Nov 09 '11 at 16:17

score 4 · Answer 1 · answered Nov 09 '11 at 16:16

The current state of the document is maintained by the browser as a tree of DOM objects representing nested elements and text nodes. It is not maintained as some HTML markup source that you can make arbitrary edits to, even if after() makes you think that's what it's doing.

So:

jQuery('</ul><ul class="links">');

This can't work. jQuery(markup) can only create DOM nodes from well-formed elements, starting with a start tag and including content and an end tag where necessary. It can't create an object representing an end-tag and the start-tag of a different element.

Instead of trying to work with HTML source, move the existing element nodes around in the DOM.

var items= ul.children();
for (var i= 0; i<items.length-5; i+= 5)
    items.slice(i, i+5).appendTo( $('<ul class="list">').insertBefore(ul) );

Implied is that you'll have selected your original `
` element first through whatever means you are using to do it, eg `var ul= $('#mylist');`. If you have multiple list blocks you want to split independently, put `$('.mylist').each(function(){ ... });` around it and use `this` for `ul`. — bobince, Nov 09 '11 at 20:17

score 2 · Answer 2 · edited May 23 '17 at 12:21

A similar question was asked here: jQuery split long ul list in smaller lists

I modified the answer to do what you are looking for:

$(function(){
  var $bigList = $('.col1'), group;
  while((group = $bigList.find('li:lt(5)').remove()).length){
    $('<ul class="links" />').append(group).appendTo('body');
  }
});

Depending on how exactly you are using this you will probably want to change the appendTo value to the location of the original list and then remove that now-empty list. Of course you can also tweak this to add column numbers (like your col1) to each group, etc.

Adding after every 5th with jQuery

2 Answers2

Adding
after every 5th
with jQuery