jQuery selector click function

Question

I am trying to apply the following jQuery click function but for some reason I can't seem to get the selector right, i.e.:

$("ul.menu li a").click(function(){
   $("ul.menu li").find("a").removeAttr("id");
   $(this).attr("id" , "current" );
});

This is my HTML code I am trying to apply it to, i,e,:

        <div id="sidebar">
            <ul class="menu noaccordion">
                <li>
                    <a href="#" id="current" class="topm">Home</a>
                </li>
                <li>
                    <a href="#" class="topm">About Us</a>
                </li>

My aim is to try and set the current menu selected using the id=current.

Jacob Relkin · Accepted Answer · 2010-07-16 14:31:39Z

4

How about this?

$("ul.menu li a").click(function(){
   $(".topm").attr('id', '');
   $(this).attr("id" , "current" );
});

edited Jul 16, 2010 at 14:31

answered Jul 16, 2010 at 13:46

Jacob Relkin

163k34 gold badges351 silver badges321 bronze badges

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

1 Comment

tonyf Over a year ago

@Kaaviar - I used Jacob's code but it didn't seem to work for my case, unsure if it's a DOM thing but appreciate your feedback.

Andy Robinson · Accepted Answer · 2010-07-16 13:51:29Z

0

I wouldn't remove the ID of the element. The ID attribute is designed to represent a single element in the DOM. You should really apply this with a class instead:

$("ul.menu li a").removeClass("currentMenu");
$(this).addClass("currentMenu");

So in your example:-

$("ul.menu li a").click(function() {
  $("ul.menu li a").removeClass("currentMenu");
  $(this).addClass("currentMenu");
});

You don't need to use each, as the removeClass action will be applied to each jquery result from the selector.

answered Jul 16, 2010 at 13:51

Andy Robinson

7,4772 gold badges32 silver badges20 bronze badges

Comments

Darin Dimitrov · Accepted Answer · 2010-07-16 13:59:01Z

0

I would recommend you to use a class name that indicates that a menu is selected instead of id:

<ul>
    <li>
        <a href="#" class="topm selected">Home</a>
    </li>
    <li>
        <a href="#" class="topm">About Us</a>
    </li>
</ul>

Then your click function might look like this:

$('ul a').click(function() {
    $('ul a').removeClass('current');
    $(this).addClass('current');
});

answered Jul 16, 2010 at 13:59

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

Comments

halfer · Accepted Answer · 2019-07-17 22:08:46Z

0

I managed to get it going from my original code plus the addition of a .find("a") on the last line, which has solved my problem, i.e.

    $("#sidebar ul.menu li").click(function() {
       $("ul.menu li").find("a").removeAttr("id");
       $(this).find("a").attr("id" , "current" );
    });

edited Jul 17, 2019 at 22:08

halfer

20.2k20 gold badges110 silver badges207 bronze badges

answered Jul 16, 2010 at 14:35

tonyf

35.8k54 gold badges168 silver badges265 bronze badges

Collectives™ on Stack Overflow

jQuery selector click function

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related