jQuery DOM Lab Solution

by vijayram_a

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');
    
});