JQuery Add Closing Tag And Then Reopen When Using .before()

I have this HTML:

a
b
c

Solution 1:

Assuming you have the following markup:

<ul>
    <li>a</li>
    <li>b</li>
    <li class="break">c</li>
    <li>d</li>
    <li>f</li>
</ul>

And you want to transform it into:

<ul>
    <li>a</li>
    <li>b</li>
</ul>
<ul>
    <li class="break">c</li>
    <li>d</li>
    <li>f</li>
</ul>

You can use nextAll() with andSelf() to get the elements you want to move, then create a new <ul> and use append() to relocate the elements:

var boundary = $("li.break");
$("<ul>").insertAfter(boundary.parent()).append(boundary.nextAll().andSelf());

You can see the results in this fiddle.




Solution 2:

Excellent Solution

Ok in my case .. lets say i had multiple li.break

so following solution helped me

 $("li.break").each(function(){
     var boundary = $(this);
     $("<ul>").insertAfter(boundary.parent()).append(boundary.nextAll().andSelf());
 });    

check this fiddle http://jsfiddle.net/stLW4/127/ for more understanding

Share