jQuery DOM Lab

by anandhinava

HTML

<h1>Drinks</h1>

<ul>
    <li>Hot Drinks
        <ul>
            <li>Coffee</li>
            <li>Tea
                <ul>
                    <li>Black tea</li>
                    <li>Green tea</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>Cold Drinks
        <ul>
            <li>Soda</li>
            <li>Milk</li>
            <li>Juice
                <ul>
                    <li>Orange juice</li>
                    <li>Apple juice</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

JavaScript

/** 
 * detach every 3-level deep item (such as the teas and juices),
 * make them italic, move them up one level in the heirarchy and 
 * remove their parent from the list, and make their siblings bold
 */

$( 'ul ul ul' ).each(function() {
  var $this = $(this);
  var $children = $this.children();
  var $parent = $this.parent();
    
  $children.detach().css('font-style','italic').insertAfter($parent);  
  $parent.remove();
  $children.siblings().not($children).css('font-weight','bold');
  
});