Jquery - How to get elements in a list item

Question

I have the following code:

                <li class="shop-currencies">
                    <a href="#" id="EUR" data-currency="EUR">€</a>
                    <a href="#" id="GBP" data-currency="GBP">£</a>
                    <a href="#" id="USD" data-currency="USD">$</a>
                    <a href="#" id="ZAR" data-currency="ZAR" class="current">R</a>
                </li>

When an item is clicked I want to set the class to the clicked item and get the ID of the item clicked. This is what I have so far:

$('.shop-currencies').click(function() {

    var id = $(this).attr('id');

    alert(id);

    /**
     * Remove the classes from the currency elements
     */
    $('.shop-currencies').find('a').each(function(e) {
       $(this).removeClass();
    });

    /**
     * Set the class of the clicked element
     */
    $( '#' + id).addClass('current');



});

The ID is being returned as 'undefined' How do I get the ID of the clicked link?

Thanks

Please note that your bookmark anchors (href="#") will cause the page to spring to the top if it has scrolled at all, so also add e.preventDefault(); to any solution you choose :) — iCollect.it Ltd
– iCollect.it Ltd, Commented Jan 19, 2015 at 15:39

Milind Anantwar · Accepted Answer · 2015-01-19 14:55:44Z

2

You need to attach click handler to child anchor element :

$('.shop-currencies a').click(function() {

var id = $(this).attr('id');

alert(id);

 /**
 * Remove the classes from the currency elements
 */
   $('.shop-currencies').find('a').not(this).removeClass('smclass')
 /**
 * Add class to current elements
 */
   $(this).addClass('smclass')
});

answered Jan 19, 2015 at 14:55

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

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

2 Comments

Kamil Szymański Over a year ago

I'd say it's better to use $('.shop-currencies').on('click', 'a' function() { ... }); With this modification your code will be more compatible with future versions of jQuery and will work with anchors created dynamically.

Milind Anantwar Over a year ago

And why so. there is no need to delegate the event.

iCollect.it Ltd · Accepted Answer · 2015-01-19 16:10:18Z

There are a couple of options, Milind Anantwar has one, the other is to use the originally clicked element, which is passed to the event as a target property on the event argument. You can also simplify your code a lot. Please note that your bookmark anchors will cause the page to spring to the top, so also add e.preventDefault(); to any solution you choose:

$('.shop-currencies').click(function(e) {
    e.preventDefault();
    $('a', this).removeClass('current');   // remove related anchor current class
    $(e.target).addClass('current');
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/5Lsuazvt/

The one downside to this is that clicking inside .shop-currencies, but not on a currency link, will clear the current selection. Because of this you are better off targetting the links instead:

$('.shop-currencies a').click(function(e) {
    e.preventDefault();
    $(this).siblings().removeClass('current');   // remove related anchor current class
    $(this).addClass('current');
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/5Lsuazvt/1/

Which can be reduced to one line:

$('.shop-currencies a').click(function(e) {
    e.preventDefault();
    $(this).addClass('current').siblings().removeClass('current');
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/5Lsuazvt/2/

Saving the best for last

And one last point... It is more efficient (but hardly noticeable) to add a single delegated event handler, instead of attaching 4 seperate handlers:

$('.shop-currencies').on('click', 'a', function(e) {
    e.preventDefault();
    $(this).addClass('current').siblings().removeClass('current');
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/5Lsuazvt/3/

Final thoughts:

The IDs on the links are unnecessary if you have an appropriate this available. You can remove them from the HTML. You have the currency value you require in data-currency attributes, so you could use it like this:

$('.shop-currencies').on('click', 'a', function(e) {
    e.preventDefault();
    $(this).addClass('current').siblings().removeClass('current');
    alert($(this).data('currency'));
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/5Lsuazvt/7/

A nice explanation, thank you for the tips and the effort. I am marking this as the answer as it is the most comprehensive.

aahhaa · Accepted Answer · 2015-01-19 14:58:35Z

0

your click, is attach to li instead of each a tag so do $('a').click();instead

answered Jan 19, 2015 at 14:58

aahhaa

2,2713 gold badges20 silver badges31 bronze badges

Comments

Shiva · Accepted Answer · 2015-01-19 15:05:48Z

0

Shortest and fastest answer

$('.shop-currencies > a').click(function(){
  $(this).siblings('a').removeClass('current');
  $(this).addClass('current');
});

The code pen link is here, you can play with the code your self

answered Jan 19, 2015 at 15:05

Shiva

12.7k2 gold badges74 silver badges91 bronze badges

1 Comment

iCollect.it Ltd Over a year ago

Never say shortest and fastest as a) it is not the shortest/fastest way to do this code and b) you are unlikely to care how fast this simple operation is as the speed differences are tiny :) (F.Y.I. a delegated event handler will be faster to connect and chaining your siblings after addClass will make it shorter :>)

rob.m · Accepted Answer · 2015-01-19 15:59:57Z

0

$('.shop-currencies a').each(function() {
 $(this).on("click", function(event) {
  event.preventDefault();
  var id = $(this).attr('id');
  $('.shop-currencies a').removeClass("current");
  $(this).addClass('current');
  alert(id);
 });
});

http://jsfiddle.net/nj37g5rm/8/

edited Jan 19, 2015 at 15:59

answered Jan 19, 2015 at 15:24

rob.m

10.7k21 gold badges90 silver badges175 bronze badges

16 Comments

iCollect.it Ltd Over a year ago

Why introduce an each when jQuery does that automatically? Just realised this does not even target the anchors, so will not work at all. :(

rob.m Over a year ago

he has an each on his code. Thanks for the down vote. This code I wrote works perfectly. if you want you can argue it but my answer is correct for his question no need for down votes.

rob.m Over a year ago

ye typo, forgot the a tag, now updated. No need for big times.

iCollect.it Ltd Over a year ago

The ID was only used to select the element the element was clicked :) That of course is a complete waste of time if you have an appropriate this. You need to figure out the intended aim and not copy the OPs mistakes :) ID's are not even needed for the desired result.

iCollect.it Ltd Over a year ago

As the currency meta data value is in data-currency, I would drop the IDs (if only to avoid ID-clutter on the page) and use .data("currency"). I updated my own answer to include this suggestion.

|

Collectives™ on Stack Overflow

Jquery - How to get elements in a list item

5 Answers 5

2 Comments

1 Comment

Comments

1 Comment

16 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

1 Comment

Comments

1 Comment

16 Comments

Your Answer

Sign up or log in

Post as a guest

Related