Practice Set Week 11, PS #2

by Lucille Kenney

HTML

<h4>Practice Set: Basic jQuery</h4>

<p>This assignment will give you practice with some basic jQuery capabilities. There are three tasks in this practice set. Use the jQuery API documentation as needed!  </p>
    <p>
    Your tasks are:</p>
<ol id="tasks">
    <li>Find the items in this list and add a yellow background to them (consider using the .css() method)</li>
    <li>Find the second item in this list (this one!), and print its innerHTML to the third item
        <ol>Hints:
            <li>select this using a psuedo-class selector (the ones that have a colon), or array [] notation on the collection of all these li's</li>
            <li>select the third one in a similar way</li>
            <li>use the element's innerHTML and/or the jQuery .html() method to read/write the content from #2 to #3</li>
        </ol>
    </li>
    <li>This one gets overwritten with the output of #2</li>
    <li>Make this item disappear if you click on it! (the .click() method may be helpful)</li>
</ol>

JavaScript

// your solutions here

//SOLUTION

$('ol#tasks li').css("backgroundColor", "yellow");

// Since there are two lists under ol#tasks, we'll get more than
// one match if we simply do 'ol#tasks li:eq(2)'.
//  So, we use the '>' as part of our selector to limit the
//  matches to the immediate children of the ol element
//  see http://www.w3schools.com/cssref/sel_element_gt.asp
$('ol#tasks > li:eq(2)').html($('ol#tasks > li:eq(1)').html());

// select the fourth li inside of the ol, and 
//  use .toggle() to make it disappear when clicked on
//  We also could have used .hide() or .css("display","none") 
//   or others (.fadeToggle(), etc). 
$('ol#tasks > li:eq(3)').click(function(){
    $(this).toggle();
});