CCode for Artists - Miles DeCoster





This html code has some list items on the page. The jQuery routine generates some small red boxes based on the number of list items and changes the background color of the list items to match the box when you click on the box.

The $(...).index() function returns the index number of a selected item in the array returned by the jQuery function, which is to say, its numerical position in the returned array. For example $('p') selects all of the paragraph tags, so if there happen to be 3 paragraphs they would be returned in an array [p, p, p] at indexes 0, 1, 2. In this example we have 5 divs generated with a class of "myLink" so $('.myLink') returns an array of the 5 divs. We add a click function to the class via $('.myLink').click(function(event) {}); Now we can use either $(event.target).index() or $('.myLink').index(this) to return the index number/position of the particular div clicked on.

The $(...).eq() function is more or less the opposite of the index() function. The eq() function returns the object at the specified location in the array returned by the jQuery selector. So $('li').eq(1) would be the second list item and $('li').eq(whichLink).toggleClass('redbg'); will toggle the class .redbg on the item at location whichItem (a variable) in the array returned by the $('li') selector.

// this function checks to see which box is clicked on 
// and changes the numerically corresponding list item
$('.myLink').click( function() {
	whichLink=$('.myLink').index(this);
	$('li').eq(whichLink).toggleClass('redbg');
});