jQuery addClass doesn't add class to element

Question

I've the following html code

<ul class='selectul'>
    <li class='active'><a href='?sortby=views'>by Popularity.</a></li>
    <li><a href='?sortby=recency'>by Recency.</a></li>
    <li><a href='?sortby=alphabet'>Alphabetically.</a></li>
</ul>

When any <li> element is clicked, I want to add class='active' to it. None of its siblings is then allowed to have this class. I tried to do this with the following jQuery code

(function(){
    $('.selectul li').on('click',function(){
        $(this).addClass('active');
        $(this).siblings().removeClass('active');
    });
}())

but it doesn't seem to do anything. I'm just getting started with jQuery so I apologize if this question is rather basic.

You should use document ready handler instead of a self-invoking function. — Ram
– Ram, Commented Apr 12, 2013 at 12:51
Your code looks fine, i suspect you need to wrap your code in a document ready event - api.jquery.com/ready — Stephen Binns
– Stephen Binns, Commented Apr 12, 2013 at 12:52
If you are just getting started you should follow this tutorial very closely: docs.jquery.com/Tutorials:Getting_Started_with_jQuery. — Felix Kling
– Felix Kling, Commented Apr 12, 2013 at 12:52
Also, you can chain the functions $(this).addClass('active').siblings().removeClass('active'); — andyb
– andyb, Commented Apr 12, 2013 at 12:59

PaulRoth · Accepted Answer · 2013-04-12 13:04:39Z

5

The script is all right. The problem is somewhere else. Once you click the link, the document reload and you do not notice the change of classes.

Try:

(function(){
  $('.selectul li').on('click',function(){
    $(this).addClass('active');
    $(this).siblings().removeClass('active');
    return false;
  });
}());

return false interrupts the Click-Event and prevent the reload of the document.

answered Apr 12, 2013 at 13:04

PaulRoth

3141 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

RubenGeert Over a year ago

thanks, that did the trick! However, now my query string doesn't change anymore when I click on the options. And that is a bit of a problem...

PaulRoth Over a year ago

If you are sending a request anyway, then change the active-class on the server side ;-)

RubenGeert Over a year ago

do you mean I should have PHP check for the query string and modify the HTML according to it?

PaulRoth Over a year ago

Exactly, for example: <? if ($_GET['sortby'] == 'views'): ?>class="active"<? endif; ?>

RubenGeert Over a year ago

Clear. I'll see if that'll accomplish what I'm looking for!

David Houde · Accepted Answer · 2013-04-12 12:54:56Z

1

Your code looks good, and I have verified it working @ jsfiddle.net

http://jsfiddle.net/kEfyT/1/

$(document).ready(function(){
    $('.selectul li').on('click',function(){
        $(this).addClass('active');
        $(this).siblings().removeClass('active');
    });
});

answered Apr 12, 2013 at 12:54

David Houde

4,7881 gold badge22 silver badges29 bronze badges

2 Comments

RubenGeert Over a year ago

thank you, I tried that but it still seems to do nothing. I know the html source code is not supposed to change but in the Google Chrome Developer tools, I should see this class being added, right? It still isn't... What else could be the problem?

RubenGeert Over a year ago

The problem is that the page reloads on clicking, undoing the jQuery effect :-(

Stephen Binns · Accepted Answer · 2013-04-12 12:54:46Z

0

Try waiting for a document ready event as the elements might not be on the page yet.

$(function(){
    $('.selectul li').on('click',function(){
        $(this).addClass('active');
        $(this).siblings().removeClass('active');
    });
});

answered Apr 12, 2013 at 12:54

Stephen Binns

76510 silver badges17 bronze badges

Comments

Dhaval Marthak · Accepted Answer · 2013-04-12 13:04:35Z

0

I think you should code like this

http://jsfiddle.net/3WBvL/2/

$(document).ready(function(){
    $('.selectul li').on('click',function(){

        $(this).addClass('active');
        $(this).siblings().removeClass('active');
    });
});

edited Apr 12, 2013 at 13:04

answered Apr 12, 2013 at 12:55

Dhaval Marthak

17.4k6 gold badges48 silver badges69 bronze badges

Collectives™ on Stack Overflow

jQuery addClass doesn't add class to element

4 Answers 4

5 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related