Question

I am trying to break down a long unordered list into smaller pieces like this:

$('.cList').each(function() {
    var thisList = $(this).find('li')
    var thisLen = thisList.length
    for(var x=0;x<thisLen;x++) {
        if((x % 5)==0&&x>0) {
            $(thisList).eq(x).after("</ul><ul>")    
        }    
    }
})

What I end up with is this:

<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<ul></ul> <---- I want the list to end and start, not make a nested list

instead of this:

<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul><ul>  <--- like this

It’s as if inserting </ul><ul> is not valid HTML and jQuery is somehow decidng that <ul></ul> is valid.

See: http://jsfiddle.net/MGHt5/

Answer 1

Instead of worrying specifically about open- and close-tags, I’d use .wrapAll() to wrap <ul> tags around a jQuery object containing 5 <li>s. You can use .slice() to grab chunks of <li>s from thisList.