Manipulate all elements except those that were currently pressed

Question

I wanted to know if there is a way to change the children while isolating the one that is currently clicked, so far I have a simple workaround with the click event handler inside:

$(function() { $(".hd").children("ul").children().each(function(){ $(this).click(function(){ alert('Handler for .click() called');//Test (remove after completion) }); }) }); <!--HTML to manipulate> <div class="hd"> <h2>Important Information</h2> <ul> <li><a href="#">Faculty</a></li> <li><a href="#">Staff</a></li> <li><a href="#">Students</a></li> </ul> </div> 

I have links in <ul> which I consider as tabs. What I'm trying to do is add a class to the currently selected <li> and simultaneously remove the classes from all the other <li> in the list. I think I could change it, i.e. The click handler should go first, and the bypass should go inward. My goal is this:

Answer 1

 $('.hd > ul > li').click(function(){ $(this).addClass('myClass').siblings().removeClass('someClass'); }); 

Pay attention to the difference in the selector between Nick and I decisions - mine is only going to capture direct children at each level, while all descendants of ul li will suffice it.

Answer 2

Try the following:

 $(function() { $(".hd ul li").click(function(){ $(this).addClass("current").siblings().removeClass("current"); }) }); 

Answer 3

Like this:

 $('div.hd ul li').click(function() { $('div.hd ul li').not(this).hide(); $(this).show(); });