jQuery selectors help

Question

I have the following HTML

<ul class="main-navigation">
  <li class="left">&nbsp;</li>
  <li class="normal">Home</li>
  <li class="normal">Internet</li>
  <li class="normal">Movies</li>
  <li class="normal">Music</li>
  <li class="normal">Documents</li>
  <li class="normal">Windows</li>
  <li class="right">&nbsp;</li>
</ul>

What I want to do is, get the array of <li> elements which have the "normal" class and loop through them and add event listeners.

What jQuery code will return the array? I tried different combinations like -

$('.main-navigation.normal')
$('.main-navigation li .normal')

How can I get that array of nodes? How can I loop through them and add events?

Answer 1

You want to use jQuery.each

Update

This is untested, but try toggleClass:

jQuery("#main-navigation li.normal").toggleClass('newClass');

Answer 2

$('.main-navigation .normal') or $('.main-navigation li.normal')

Using $('.main-navigation li .normal') you will select nodes inside li with the class .normal and with the $('.main-navigation.normal') you will select the element with both .main-navigation and .normal

Answer 3

To add events, you don't need to loop through them. jQuery will add the event to all of the elements returned with the selection. For example:

$("ul.main_navigation li.normal").hover(function(){
    //what happens on mouseover
    $(this).attr('class', 'highlighted');
}, 
function(){
    //what happen on mouseout
    $(this).attr('class', 'normal');
}
);

Or you can use jQuery.each to loop through them, say if you need to add them to an array or something like this:

$("ul.main_navigation li.normal").each(function(){
    //this iterates through li.normal one by one
});