[RESOLVED] addClass to first link in a list

[abovethefold]

I am trying to attach a class to the first link in an unordered list, but I can't seem to get it to work. Can someone take a look at the code below and see if I have any errors?


The jQuery Call

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.pack.js"></script>

From my custom script

// Begin Javascript 
$(document).ready(function(){
    $("#menu ul li a:first").addClass("itemhover");
});

The HTML

<div id="menu">
   <ul>
     <li class="first">Select User</li>
     <li><a href="#invite"><span>Bill</span></a></li>
     <li><a href="#invite"><span>George</span></a></li>
     <li><a href="#invite"><span>Tom</span></a></li>
   </ul>
</div>

[freshmasterj]

wouldn't it be something like
$("li.first").addClass("itemhover");

[abovethefold]

wouldn't it be something like
$("li.first").addClass("itemhover");

Damn, I forgot to indicate that I am trying to assign the class to the first hyperlink instead of the first list item. Sorry about that.

Is it not possible to assign the first filter in a nested set of selectors like my original code suggests? I thought it was possible.

[freshmasterj]

ok then I think you would want to use first-child not first

$("#menu ul li a:first-child").addClass("itemhover");

[abovethefold]

ok then I think you would want to use first-child not first

$("#menu ul li a:first-child").addClass("itemhover");

Unfortunately, that didn't work. Do you think it's something in the JS that's interfering? Here's the whole shabang:

//On load page, init the timer which check if the there are anchor changes each 300 ms
$().ready(function(){
    setInterval("checkAnchor()", 1);
});
var currentAnchor = null;
//Function which chek if there are anchor changes, if there are, sends the ajax petition
function checkAnchor(){
    //Check if it has changes
    if(currentAnchor != document.location.hash){
        currentAnchor = document.location.hash;
        //if there is not anchor, the loads the default section
        if(!currentAnchor)
            query = "section=select-user";
        else
        {
            //Creates the  string callback. This converts the url URL/#main&id=2 in URL/?section=main&id=2
            var splits = currentAnchor.substring(1).split('&');
            //Get the section
            var section = splits[0];
            delete splits[0];
            //Create the params string
            var params = splits.join('&');
            var query = "section=" + section + params;
        }
        //Send the petition
        $.get("callbacks.php",query, function(data){
            $("#dynamiccontent").html(data);
        });
    }
}

var currentSelection = 0;
var currentUrl = '';

// Register keypress events on the whole document
$(document).keypress(function(e) {
    switch(e.keyCode) { 
        // User pressed "page up" key
        case 33:
            if(currentAnchor != '') {
                switch(currentAnchor) { 
                    case '#chat-line3':
                        window.location = '#chat-line2';
                    break;
                    case '#chat-line2':
                        window.location = '#chat-line1';
                    break;
                    case '#chat-line1':
                    break;
                }
            }
        break;
        // User pressed "page down" key
        case 34:
            if(currentAnchor != '') {
                switch(currentAnchor) { 
                    case '#chat-line1':
                        window.location = '#chat-line2';
                    break;
                    case '#chat-line2':
                        window.location = '#chat-line3';
                    break;
                    case '#chat-line3':
                    break;
                }
            }
        break;
        // User pressed "end" key
        case 35:
            navigate('end');
        break;
        // User pressed "back" key
        case 8:
            navigate('back');
        break;
        // User pressed "up" arrow
        case 38:
            navigate('up');
        break;
        // User pressed "down" arrow
        case 40:
            navigate('down');
        break;
        // User pressed "enter"
        case 13:
            if(currentUrl != '') {
                window.location = currentUrl;
                //store data using name/value format
            }
        break;
    }
});



// Add data to let the hover know which index they have
var currentSelection = $("#menu ul li a" ).index(this);



function navigate(direction) {
    // Check if any of the menu items is selected
    if($("#menu ul li .itemhover").size() == 0) {
        currentSelection = 0;
    }
    
    if(direction == 'up' && currentSelection != -1) {
        if(currentSelection != 0) {
            currentSelection--;
        }
    } else if (direction == 'down') {
        if(currentSelection != $("#menu ul li").size() -1) {
            currentSelection++;
        }
    } else if (direction == 'back') {
        if(currentSelection != 0 || currentUrl != '#invite') {
            currentAnchor--;
        }
    } else if (direction == 'end') {
        if(currentSelection != 0) {
            window.close();
        }
    }
    setSelected(currentSelection);
}

function setSelected(menuitem) {
    $("#menu ul li a").removeClass("itemhover");
    $("#menu ul li a").eq(menuitem).addClass("itemhover");
    currentUrl = $("#menu ul li a").eq(menuitem).attr("href");
}

$(document).ready(function(){
    $("#menu ul li a:first-child").addClass("itemhover"); 
    //$("#menu ul li a:first").toggleClass("itemhover");
    //$("#menu ul li a:first").addClass("itemhover");
});

[Jeff Mott]

abovethefold,

Your JS is selecting an "a" tag, but the menu markup you've shown here doesn't have any "a" tags.

EDIT: My mistake. I must have been blind or something.

[ssystems]

$("#menu ul li:not('.first'):first").children("a").addClass("itemhover");

[abovethefold]

$("#menu ul li:not('.first'):first").children("a").addClass("itemhover");

Hey ssytems,

So I did a little test. I stripped out the other JS files and took your code + my markup and it worked fine. So this tells me that something in my the JS that I posted on this forum is causing the break. Not sure what it is, but at least I have more of a clue as to what is happening.

Thanks everyone for your support! I will mark this as resolved.