Change Menu Styling on fly or pass a param inside jQuery .each iterator

Question

I have a bunch of menu links and want to change their style on click - say you click "about" and it becomes bold and red. I select the items and bind click event to them:

$("#nav_menu > *").bind("click",function(){doTrigger(this.id);});

this way I pass the ID of the clicked item to doTrigger.

Ok. Now in doTrigger I am trying to iterate through the items and change their styles: all to style1 and clicked to style2 for example. The problem is that:

$("#nav_menu > *").each(function(){;});

will not let me pass the id of the clicked item.

I think there should be a less complicated way of getting what I need. Besides, I think I am lost, too.

Answer 1

the function passed to $.each() in doTrigger() runs in the context of and thus has access to variables in doTrigger() - you don't need to pass anything

function doTrigger(id) {
...
   $("#nav_menu > *").each(function(){ /* you can access var id in here */ ;});

Answer 2

Try something like this:

$("#nav_menu > *").bind("click",function(){ $("#nav_menu > *").attr('class', 'class1'); $(this).attr('class', 'class2'); });

This resets all children to class1 when an item is clicked, and then only that item is class2.