Question

I have an unordered list which is dynamically created, and I need to add a class called ‘selected’ to one particular -li-.

The -ul- is a list of the Days of the Week, and the -li- that needs to be selected is the current day. Unfortunately I can’t figure out how to add this class to just the one element, and the entire list disappears whenever I try to add this class. Here’s my code:

var weekday = new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat");
var today = day.getDay();
for(var x=0;x<=6;x++){
    $('ul').append(
        $('<li>')
        .toggleClass(function(){
            if(today == x){ return 'selected'; }
            else{ return ''; };
        });
        .append( $('<a href = "#' + weekday[x].toLowerCase() + '">' + weekday[x] + '</a>'));    
    );      
$('li:last').addClass('last-child');

Can someone help me figure out how to add this class to just the current day’s -li-?

Answer 1

Following the advice from the other comments and fixing some errors fixed the code:

var weekday = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'],
    today = new Date().getDay(),
    list = $('ul');

for(var x=0;x<=6;x++){
    list.append(
        $('<li></li>', {
            html : '<a href = "#' + weekday[x].toLowerCase() + '">' + weekday[x] + '</a>'
        }).toggleClass(function(){
            if(today == x){
                return 'selected';
            }
        }).bind('click', function(e){
            e.preventDefault();
            $(this).parent().children('li').removeClass('selected');
            $(this).addClass('selected');
        })
    );
}

$('li:last').addClass('last-child');