views:

159

answers:

3

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!

+3  A: 

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.

Tatu Ulmanen
Great! this works perfectly
Taeke
So mark it as correct!
ScottE
A: 

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!

Taeke
A: 

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

czarchaic
that didn't really work, the ul hierarchy in the .exception doesn't stay intact
Taeke