jQuery DOM Lab

by shruthi

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 $items1 = $('ul ul ul');
console.log($items1.children());
$items1.css('font-style', 'italic');
var $a = $items1.eq(0);
var $b = $items1.eq(1);
console.log($a.parent().remove());
console.log($b.parent().remove());
var bar = $a.children().detach().css('font-style', 'italic');;
var bar1 = $b.children().detach().css('font-style', 'italic');;

var $items2 = $('ul ul');
console.log($items2.children());
$items2.eq(0).append(bar);
$items2.eq(1).append(bar1);