I have an element :
...
<li class="products active"><a href="" title="Title">test</a></li>
...
I want to access this "li" tag and swap the "active" class to "past" class so the final result would be :
...
<li class="products past"><a href="" title="Title">test</a></li>
...
What is the easiest / efficient way to achieve this using jQuery ?
It is much simpler to use toggleClass(), assuming the element already has one or the other.
Just give it both class names:
$('.active').toggleClass('past active');
If it has active (which it will since that is how it is being selected), its active class will be removed, and the past class will be added.
If you're doing this inside a click handler, it might look like this:
$('.products').click(function() {
$(this).toggleClass('past active');
});
Example: http://jsfiddle.net/TCvQU/
.products, I don´t think it´s either .active or .past; .past might be something like previously selected...
products class stays in tact.$("li.active").removeClass("active").addClass("past");
You'll want to modify the selector so it only grabs the correct li(s)...
$('li').removeClass('active').addClass('past');
Perhaps to $('li.active');
With your current markup you would do something like:
$('li.active').removeClass('active').addClass('past');
If you want to change a specific list item element, though, then you will need to identify it somehow. Maybe something like:
<li class="products active" id="item1">..</li>
And then you can do:
$('#item1').removeClass('active').addClass('past');
$('.active').addClass('past').removeClass('active')
.active twice :-)I agree with all three answers. Above with the expection that we do not know if your are running your JQuery pure or as part of a CMS which may require some tag changing.
