Question

I’d like to break apart a list by inserting closing tags with jquery.

Here’s the original:

<ul>
<li>one</l1>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>

and i’d like to turn it into:

<ul>
<li>one</l1>
<li>two</li>
</ul>
<ul>
<li>three</li>
<li>four</li>
</ul>

I haven’t been able to accomplish this using :nth-child(n) or .html() or .append(), but I’m thinking perhaps some sort of outter html replace would do it. Maybe there’s an easier way. Any ideas?

Answer 1

$(‘li:nth-child(3), li:nth-child(4)’).insertAfter(‘ul’).wrapAll(”)You can’t “break a list”. You can either A) remove it and replace it with two lists B) extract some elements to make another list with.
The following is terrible terrible practice, but then again so is what you’re asking…

$('li:nth-child(3), li:nth-child(4)').insertAfter('ul').wrapAll('<ul />')

http://jsfiddle.net/aJWCs/