How to move third level li elements up and remove the ul?

Question

I have a fairly large, three level deep, menu consisting of nested lists like in this example

<ul class="nav">
    <li><a href="#">1</a>
     <ul>
      <li><a href="#">2</a>
       <ul>
        <li><a href="#">level 3</a></li>
        <li><a href="#">level 3</a></li>
        <li><a href="#">level 3</a></li>
       </ul>
      </li>
      <li><a href="#">2</a>
     </ul>
    </li>
</ul>

For the menu I would like to work with two levels only so I would like to remove the third ul and add a class to its (former) children for styling purposes.

Can this be done with jQuery? The result should be looking something like:

<ul class="nav">
    <li><a href="#">1</a>
     <ul>
      <li><a href="#">2</a></li>
      <li class="third"><a href="#">level 3</a></li>
      <li class="third"><a href="#">level 3</a></li>
      <li class="third"><a href="#">level 3</a></li>
      <li><a href="#">2</a></li>
     </ul>
    </li>
</ul>

Any help is appreciated!

Answer 1

This should do it:

$('ul ul ul').each(function() {
    $(this).parent().after($(this).find('li').addClass('third'));
    $(this).remove();
});

For every third level UL element, insert all child LI elements after the UL's parent element, then remove the UL itself.

Answer 2

Thanks Tatu,

your answer was the solution to my initial question. To make things more difficult I'd like to achieve the same effect with one exception.. I'd like to remove the third level ul like in the above situation except for the navigation under li.exception. So

<ul class="nav">
    <li class="exception"><a href="#">1</a>
        <ul>
                <li><a href="#">2</a>
                        <ul>
                                <li><a href="#">level 3</a></li>
                                <li><a href="#">level 3</a></li>
                                <li><a href="#">level 3</a></li>
                        </ul>
                </li>
                <li><a href="#">2</a>
        </ul>
    </li>
    <li><a href="#">1</a>
        <ul>
                <li><a href="#">2</a>
                        <ul>
                                <li><a href="#">level 3</a></li>
                                <li><a href="#">level 3</a></li>
                                <li><a href="#">level 3</a></li>
                        </ul>
                </li>
                <li><a href="#">2</a>
        </ul>
    </li>
    <li><a href="#">1</a>
        <ul>
                <li><a href="#">2</a>
                        <ul>
                                <li><a href="#">level 3</a></li>
                                <li><a href="#">level 3</a></li>
                                <li><a href="#">level 3</a></li>
                        </ul>
                </li>
                <li><a href="#">2</a>
        </ul>
    </li>
</ul>

would become:

<ul class="nav">
   <li class="exception"><a href="#">1</a>
        <ul>
          <li><a href="#">2</a>
             <ul>
               <li><a href="#">level 3</a></li>
               <li><a href="#">level 3</a></li>
               <li><a href="#">level 3</a></li>
             </ul>
          </li>
        <li><a href="#">2</a>
        </ul>
    </li>

   <li><a href="#">1</a>
        <ul>
                <li><a href="#">2</a></li>
                <li class="third"><a href="#">level 3</a></li>
                <li class="third"><a href="#">level 3</a></li>
                <li class="third"><a href="#">level 3</a></li>
                <li><a href="#">2</a></li>
        </ul>
    </li>

    <li><a href="#">1</a>
        <ul>
                <li><a href="#">2</a></li>
                <li class="third"><a href="#">level 3</a></li>
                <li class="third"><a href="#">level 3</a></li>
                <li class="third"><a href="#">level 3</a></li>
                <li><a href="#">2</a></li>
        </ul>
    </li>
</ul>

Could you help out once more? Thanks!

Answer 3

$('ul ul ul').each(function() { $(this).parent().after($(this).find('li').addClass('third')); if (!$(this).parents('.exception').length){ $(this).remove(); } });