JSFiddle - React, Tailwind, and code Playground

by rmurphey

HTML

<div id="header">
        <div id="logo" rel="logo"><a href="index.html">jQuery Fundamentals</a></div>
        <ul id="nav">
            <li class="selected"><a href="http://docs.jquery.com">jQuery Docs</a></li>
            <li><a href="sandbox.html">Sandbox</a></li>
            <li>Resources
                <ul>
                    <li><a href="http://groups.google.com/group/jquery-en">Google Group</a></li>
                    <li><a href="http://stackoverflow.com">Stack Overflow</a></li>
                    <li><a href="http://delicious.com/rdmey/jquery-class">Delicious Bookmarks</a></li>
                </ul>
            </li>
        </ul>
    </div>

    <div id="main">
        <form id="search">
            <label for="q">Enter search term</label>
            <input type="text" name="q" class="input_text" />
            <input type="submit" value="Go" />
        </form>

        <h1>Eat here.</h1>
        <p>Lorem ipsum dolor sit amet, <a href="foo.html">consectetur adipisicing elit</a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        <ul id="slideshow">
            <li>
                <h2 rel="yummy fruit!">Fruit</h2>
                <img src="images/fruit.jpg" alt="fruit" />
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt...

JavaScript

/********************************
 * Traversing                    *
 ********************************/

// Get all the image elements on the page; log each image’s alt attribute.
$('img').each(function(i) {
    var $img = $(this);
    console.log('alt attr for', $img, 'is', $img.attr('alt'));
});

// Get the search input text box, then traverse up to the form and add a class to the form that contains it.
var $form = $('input[name="q"]').closest('form').addClass('foo');
console.log('$form is', $form);

// Get the list item inside #myList that has a class of “current” and remove that class from it; add a class of “current” to the next list item.
console.log('li.current starts as', $('li.current'));
$('li.current')
    .removeClass('current')
    .next()
        .addClass('current');
console.log('li.current is now', $('li.current'));

// Get the select element inside #specials; traverse your way to the submit button.
var $input = $('#specials select')
    .parent()
    .next()
    .find('input.input_submit');

console.log('$input is', $input);

// Get the first list item in the #slideshow element; add the class “current” to it, and then add a class of “disabled” to its sibling elements.
var $selection = $('#slideshow li:first')
    .addClass('current')
    .siblings()
        .addClass('disabled');

console.log('$selection is', $selection);