How to add a class using jQuery, when I click on multiple elements

Question

Given the following html:

<ul class="sub-categories">
    <li>
        <a href=""><img src="" alt=""></a>
        <h2 class="sub-header">
            <a href="">category name</a>
        </h2>
    </li>
</ul>

I want to add the class 'current' to the 'a' tag inside '.sub-header' irrespective of which anchor is clicked.

The following works only when I click the first anchor.

$('ul.sub-categories li a').click(function(event) {
    event.preventDefault();

    $(this).next(".sub-header").children('a').addClass("current");
});

How do I make it work irrespective of which anchor is clicked ?

ariel_556 · Accepted Answer · 2014-11-16 17:43:58Z

2

Event delegation:

$('ul.sub-categories>li').on('click', 'a', function(event) {
  event.preventDefault();
  $(event.delegateTarget).find('h2>a').addClass("current");
});

http://jsbin.com/wajerujose/1/edit?html,css,js,output

edited Nov 16, 2014 at 17:43

answered Nov 16, 2014 at 17:28

ariel_556

3781 silver badge9 bronze badges

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

Comments

K K · Accepted Answer · 2014-11-16 17:00:00Z

0

Try this:

$('ul.sub-categories li a').click(function (event) {
    event.preventDefault();
    // works for first a clicked only        
    $(this).next(".sub-header").children('a').addClass("current");
});

answered Nov 16, 2014 at 17:00

K K

18.2k4 gold badges33 silver badges39 bronze badges

2 Comments

Marco Over a year ago

works only for the first clicked element 'a', not for the second

K K Over a year ago

@Marco So you want to add class to 'a' inside first .sub-header irrespective of which anchor is clicked?

Roko C. Buljan · Accepted Answer · 2014-11-16 17:01:40Z

0

$('.sub-categories li').click(function(event) {
  event.preventDefault();
  $(this).find('.sub-header a').addClass("current");
});

answered Nov 16, 2014 at 17:01

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

1 Comment

Roko C. Buljan Over a year ago

@Marco It's not probable I'd suggest you something that does not work: jsbin.com/tuqeyi/1/edit?html,css,js,output. Means you should show us more code. Or you have other listeners that are preventing the click to propagate or...

thecodeparadox · Accepted Answer · 2014-11-16 17:04:41Z

0

Try this:

$('ul.sub-categories > li > a').click(function (event) {
    event.preventDefault();       
    $(this).next(".sub-header").find('a').addClass("current");
});

Main is to change the selector to ul.sub-categories > li > a from ul.sub-categories li a. Because ul.sub-categories li a is acquiring all <a> within .sub-categories, while your target is only those <a> tags which are direct target to ul.sub-categories li.

answered Nov 16, 2014 at 17:04

thecodeparadox

87.2k22 gold badges143 silver badges164 bronze badges

1 Comment

Marco Over a year ago

works only for the first clicked element 'a', not for the second

Marco · Accepted Answer · 2014-11-16 17:32:06Z

0

I did more research on this site and kept playing around and found something that works. Im not sure if it's the most elegant solution, but it works.

$('ul.sub-categories li a').click(function(event) {
    event.preventDefault();

   if ($(this).parent().is(".sub-header")) {
        $(this).addClass("current");
    } else {
        $(this).next(".sub-header").children('a').addClass("current");
    }
});

answered Nov 16, 2014 at 17:32

Marco

2,7459 gold badges47 silver badges65 bronze badges

Collectives™ on Stack Overflow

How to add a class using jQuery, when I click on multiple elements

5 Answers 5

Comments

2 Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related