jQuery DOM Lab

by vijayram_a

HTML

<h1>Drinks</h1>

<ul>
    <li id="node1">Hot Drinks
        <ul>
            <li>Coffee</li>
            <li>Tea
                <ul>
                    <li>Black tea</li>
                    <li>Green tea</li>
                </ul>
            </li>
        </ul>
    </li>
    <li id="node2">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 $node1level3=$("ul li#node1 ul li ul");
var p1 = $node1level3.detach();
var $node2level3=$("ul li#node2 ul li ul");
var p2 = $node2level3.detach();
var $node1level1=$("ul li#node1");
$node1level1.append(p1);
var $node2level1=$("ul li#node2");
$node2level1.append(p2);
//var $level1=$("ul li");
//$level1