jquery access nested div

Here is my question. I am having this simple menu.

<div id="menu"> 
    <ul>
        <li> <a id="home" href="home.html"> home </a>           </li>
        <li> <a id="profile" href="profile.html"> profile</a>   </li>       
    <ul>
</div>

and I wanna to use jQuery to add a class ".active" to the a tag with the id="home".

What I am writing is: $('a#home').addClass("activ开发者_运维知识库e"); but is not working. How can I access this nested tag and add some class??

Any suggestions would be highly appreciated! Thanx

The typical mistake is to put your jQuery code in the header, but not wrapped in a ready event.

Make sure you have:

$(document).ready(function(){
 $('a#home').addClass('active');
});

see here for a live test: http://jsfiddle.net/QdVLs/ (remember jsfiddle automartically wraps any code in a ready method like above)

You may need to put use it after document ready

$(document).ready(function(){
    $('a#home').addClass("active");
});

The reason can be when your javascript is executed the dom may not have created the element a#home/#home. This case can be handled using the ready method as shown above.

You can test the case by just adding a alert($('a#home').length) statement before your code. It should alert 1 else you can try to use the ready() and try again, this time put the alert() inside the ready() method.

$('a#home').addClass("active"); should work.

Do you have other element with the same id ?

Where did you put this code ? (It should be executed after document ready event)