Problem in adding a class element to an element

Question

I'm trying to remove a class attribute from an element and add the class to another element. I successfully removed the class but having problem in appending the class to the other element.

When I click the link 'View All',

<a class="code_link" id="viewAllMyForms" href="#" >View All</a>

This function is called.I want to remove the class "selected" from the li element "home" and add it to the li element of myForms.

$('#viewAllMyForms').click(function(){

    $('#tabber_module').find(".selected").removeClass();
    $('#tabber_module #myForms li').addClass("selected");

});

<div class="tabber_module" id="tabber_module">
     <ul class="horizontal_navigation child2">
         <li class="first some_li selected" id="home"> 
             <a href="#" id="home">Home</a>
         </li>
         <li class="some_li" id="notifications"> 
             <a href="#" id="notifications">Notifications</a>
         </li>         
         <li class="some_li" id="myForms"> 
             <a href="#" id="myForms" >My Forms</a>
         </li>              
         <li class="some_li" id="reviewForms"> 
             <a href="#" id="reviewForms">Forms For My Review</a>
         </li>
         <li class="some_li" id="otherForms"> 
             <a href="#" id="otherForms">Other Forms</a>
         </li>
     </ul>
</div>

The class "selected" is removed form the "home" li element but is not added to the "myForms" li element.

Having same id on multiple elements is not allowed...

kkyy
– kkyy

2009-09-04 05:30:40 +00:00
Commented Sep 4, 2009 at 5:30 — kkyy
– kkyy, Commented Sep 4, 2009 at 5:30

Christian C. Salvadó · Accepted Answer · 2009-09-04 05:36:12Z

You have id's on your LI elements, you only need to use the #id selector:

$('#viewAllMyForms').click(function(){
    $("#tabber_module .selected").removeClass("selected");
    $("#myForms").addClass("selected");
});

Note: The id attribute of the DOM elements is supposed to be a unique identifier, you have duplicated the id of the LI and A elements, you should use an ID only once in a document.

I would rewrite your markup as this:

<div class="tabber_module" id="tabber_module">
     <ul class="horizontal_navigation child2">
         <li class="first some_li selected" id="home"> 
             <a href="#">Home</a>
         </li>
         <li class="some_li" id="notifications"> 
             <a href="#">Notifications</a>
         </li>         
         <li class="some_li" id="myForms"> 
             <a href="#">My Forms</a>
         </li>              
         <li class="some_li" id="reviewForms"> 
             <a href="#">Forms For My Review</a>
         </li>
         <li class="some_li" id="otherForms"> 
             <a href="#">Other Forms</a>
         </li>
     </ul>
</div>

Note that I removed the duplicated ID attribute from the anchor elements, but if you want to select an anchor you can without having an specific ID, for example:

$('#notifications a') // selects the element <a href="#">Notifications</a>

Collectives™ on Stack Overflow

Problem in adding a class element to an element

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related