jQuery DOM Lab

by ramyaaviji

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
 */
var $subdrinks = $("ul li ul li ul");
$subdrinks.css('font-style','italic');
var $parentsib = $subdrinks.parent().siblings();
var $grandparent = $subdrinks.parent().parent().parent();
$parentsib.css('font-style','bold');
$subdrinks.parent().detach();
sub = $subdrinks.detach();
$grandparent.append(sub);