Practice Set Week 11, PS #2

by mspears

HTML

<h4>Using jQuery</h4>

<p>The unordered list below could use some editing. Use jQuery to replace the JavaScript code. Once you have put the list items in order, change the color value of the first item to one of your choosing. Finally, append a list item with an appropriate ordinal statement.</p>
    <p>
    Your tasks are:</p>
<ul id="theList">
    <li id="numberOne">This one is third.</li>
    <li id="numberTwo">This one is first.</li>
    <li id="numberThree">This one is second.</li>
    
</ul>

JavaScript

// jQuery solution
//Declare variable to get vals of current list items
var a, b, c;
a=$("#numberOne").html();
b=$("#numberTwo").html();
c=$("#numberThree").html();

$("#numberOne").html(b).css("color","green");
$("#numberTwo").html(c)
$("#numberThree").html(a);
//append new list item
$("#theList").append("<li>This one is fourth.</li>");


/*
//Original JS code
//Declare variables
var i,t,u,v,w;
t=document.getElementsByTagName("li");
u=new Array;

//Get text values of current list items
for(i=0;i<t.length;i++){

  u.push(t[i].innerHTML);
  console.log(u[i]);
}

//Reassign ordinal statements
t[0].innerHTML=u[1];
t[1].innerHTML=u[2];
t[2].innerHTML=u[0];

//change color of first list item
t[0].style.color="red"

v=document.createElement("li");
w=document.createTextNode("This one is fourth.");
v.appendChild(w);
document.getElementById("theList").appendChild(v);
*/