Reputation: 6386
if i have an li list like this:
<ul>
<li>first </li>
<li>second</li>
<li>third</li>
<li>fourth</li>
</ul>
How would i write the code in jquery to add a class to the li element , say , first without the class being added to the others?
i tried this but it of course adds to all li elements.
$(document).ready(function() {
$("ul li").click(function() {
if(!$("ul li").hasClass('active'))
{
$("ul li").addClass('active');
}
});
});
i want to be able to add the class active to only the li element that was click and remove all other exists who have active added to them. how would i do this? thanks
Upvotes: 1
Views: 668
Reputation: 136239
one way
$("ul li").click(function() {
var $this = $(this); // reference to the clicked li
if(!$this.hasClass('active'))
{
$this.addClass('active');
$('ul li').not($this).removeClass('active');
}
});
Live example: http://jsfiddle.net/Xb9yx/
Another way
$("ul li").click(function() {
var $this = $(this); // reference to the clicked li
if(!$this.hasClass('active'))
{
$this.addClass('active').siblings().removeClass('active');
}
});
Live example: http://jsfiddle.net/d5Sde/
This one one of those ones where there's probably a hundred ways to achieve the same thing.
Upvotes: 5