AddClass to parent
on function

Question

I'm trying to add a class to a parent <li>, this is what I have been trying with no result:

function calendaractive(){
    $(this).parent('li').addClass("active");
}

HTML

<li>
    <a href="javascript:void(0)" onclick="calendaractive();">2009</a>
</li>

Why does this not work?

You need not have that `'li'` inside `parent()` – KBN Feb 06 '13 at 10:17 — KBN, Feb 06 '13 at 10:17

score 7 · Answer 1 · answered Feb 06 '13 at 10:17

7

Try.
Pass this at your function binding

<li>
    <a href="javascript:void(0)" onclick="calendaractive(this);">2009</a>
</li>

change the JS accordingly

function calendaractive(anchorLink){
    $(anchorLink).parent().addClass("active");
}

answered Feb 06 '13 at 10:17

asifsid88

4,631
20
30

1

@fxg it would be better to use the jQuery approach, as shown by the other answers. – John Dvorak Feb 06 '13 at 10:23
@fxg this one has so many upvotes only because it was the first one. – John Dvorak Feb 06 '13 at 10:24
its been answered such that you don't have to change your approach – asifsid88 Feb 06 '13 at 10:27
2

Problem is, among other things, if you have 50 links like this you need to repeat this: `onclick="calendaractive(this);"` 50 times. Now imagine you want to change the function name. Yu need to change it in 50 places – cowls Feb 06 '13 at 10:31
ok thanks, I see it´s better the jQuery approach and it works too. – Feb 06 '13 at 10:32

score 3 · Accepted Answer · answered Feb 06 '13 at 10:19

3

It's better to not mix your HTML and JavaScript. It would be better to check for the click within the JavaScript itself:-

$(document).ready(function(){    
    $('li > a').on('click', function(e) {           
        $(this).parent().addClass('active');            
    });    
});

Keeping JavaScript separate from the HTML will make it easier to maintain (the same argument goes with CSS).

answered Feb 06 '13 at 10:19

drmonkeyninja

8,490
4
31
59

Of course, `li>a` might be too generous, and an ID selector would be better. – John Dvorak Feb 06 '13 at 10:20
@JanDvorak agreed. Was just showing this as an example. Would recommend a class applying to the list and selecting against that (more reusable than an ID). – drmonkeyninja Feb 06 '13 at 10:21

cowls · Answer 3 · 2013-02-06T10:30:29.847

1

You should add the event using JQuery instead of onClick method:

JS Should be something like this instead:

$(document).ready(function(){ 
    $("a").click(function() {
        $(this).parent('li').addClass("active");
    });
});

HTML Like this

<li>
    <a href="#">2009</a>
</li>

Note this will add to all anchor links, use a class if you want to only add the click event to certain anchor links

edited Feb 06 '13 at 10:30

answered Feb 06 '13 at 10:21

cowls

24,013
8
48
78

Add period `.` after `$("a")` – asifsid88 Feb 06 '13 at 10:29

score 0 · Answer 4 · edited May 23 '17 at 12:08

the this keyword in javascript means different things in different places. Sometimes it is the window, sometimes it is the function where it is used, sometimes something different. It depends on the method of invocation of the function. There is more info (and more accurate) here: How does the "this" keyword work?

So when you wrote $(this) jQuery thought you mean this class should be added to the this object whichever it is.

If you put a selector by id as an argument to jQuery, or better yet pass an argument, your code should work.

AddClass to parent on function

4 Answers4

AddClass to parent
on function