JQuery adding a class

Question

I want add a class when a <li> element clicked. but it didn't work. Here's JQuery snippet

$(".mama").click(function(){        
    var arr = ["cat","dog", "mice", "bird"];
    alink =  $(this).text();        

    $.each(arr, function(index, value) {
        if(alink == value){
            $(this).addClass('hi'); 
        }
    }); 
});

And HTML

<ul id="animal">
    <li class="mama"><a href="#">cat</a></li>
    <li class="mama"><a href="#">dog</a></li>
    <li class="mama"><a href="#">Mice</a></li>
</ul>

i also have tried to do it by .map but nothing happen. please give solution and some explain. Thanks

Downvotes for everyone that encourages this poster to use implicitly declared and/or global variables and to define an array inside a function for no reason. — m59
– m59, Commented Sep 11, 2013 at 6:47
Rather than give suggestions on correcting this, we should be pointing out that using a click event to find the text of clicked element, and then looping over all possible text elements in order to confirm that it should be triggered is the wrong way to do it. — sberry
– sberry, Commented Sep 11, 2013 at 6:49
@m59, I'm assuming this is a reduced test case, and the array serves a purpose in the real code. Good call about the global var though. — Dogbert
– Dogbert, Commented Sep 11, 2013 at 6:49

Dogbert · Accepted Answer · 2013-09-11 06:42:47Z

2

This should work:

$(".mama").click(function(){   
    var $this = $(this);     
    var arr = ["cat","dog", "mice", "bird"];
    alink =  $(this).text();        

    $.each(arr, function(index, value) {
        if(alink == value){
            $this.addClass('hi'); 
        }
    }); 
});

because this inside the each is not the DOM element <li>.

answered Sep 11, 2013 at 6:42

Dogbert

223k43 gold badges419 silver badges416 bronze badges

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

Comments

sberry · Accepted Answer · 2013-09-11 06:44:05Z

1

You probably just need to do this:

http://jsfiddle.net/reugB/1/

$('.mama').on('click', function(evt) {
    evt.preventDefault();
    $(this).addClass('hi');
});

answered Sep 11, 2013 at 6:44

sberry

133k20 gold badges145 silver badges171 bronze badges

Comments

Emil A. · Accepted Answer · 2013-09-11 06:44:09Z

0

Use this to refer to current element which was clicked.

$(".mama").click(function (e) {
    e.preventDefault();
    $(this).addClass('hi');
});

answered Sep 11, 2013 at 6:44

Emil A.

3,4455 gold badges31 silver badges47 bronze badges

Comments

xdazz · Accepted Answer · 2013-09-11 06:49:42Z

0

If you mean add the class hi to the clicked li, just do like below:

$(".mama").click(function(e){
    e.preventDefault();
    $(".mama").removeClass('hi');
    $(this).addClass('hi')        
});

edited Sep 11, 2013 at 6:49

answered Sep 11, 2013 at 6:43

xdazz

161k38 gold badges255 silver badges278 bronze badges

1 Comment

xdazz Over a year ago

@Dogbert Yep, you are right. Removed that. But I don't think the op wants to add class to all the lis.

waqas · Accepted Answer · 2013-09-11 07:50:31Z

0

 .hi { background-color: #f00 !important;}


 $('.mama').on('click', function(evt) {
evt.preventDefault();
$(this).addClass('hi');

});

answered Sep 11, 2013 at 7:50

waqas

1812 gold badges7 silver badges15 bronze badges

1 Comment

waqas Over a year ago

make .hi class color important

Rituraj ratan · Accepted Answer · 2013-09-11 06:45:41Z

-1

$(".mama").click(function(e){    
e.preventDefault();    
    var arr = ["cat","dog", "mice", "bird"];
    var alink =  $(this).find("a").text();        

    $.each(arr, function(index, value) {
        if(alink == value){
            $(this).addClass('hi'); 
        }
    }); 
});

see reference text and find

answered Sep 11, 2013 at 6:45

Rituraj ratan

10.4k8 gold badges38 silver badges55 bronze badges

Collectives™ on Stack Overflow

JQuery adding a class

6 Answers 6

Comments

Comments

Comments

1 Comment

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

1 Comment

1 Comment

Comments

Linked

Related