Question

I cant seem to understand what i’m doing wrong here.

To certain extend my code does work but instead of finding the id of the clicked element, it finds all the ids

http://jsfiddle.net/34a5b/ – I put it to animate so you can see that it finds #item1 and then #item2

The basic functionality I’m looking for goes like this:

When li is clicked > find specific id > do the functionality
corresponding that specific id

Any ideas on why this doesnt work?

    var $Nav= $('#Nav');
    var $Boxee= $('#BoxeeBox');
$Nav.each(function(){
    $(this).find('li').click(function() {
        if( $(this).find('#item1') ){
            $Boxee.animate({ backgroundColor:'blue' });
        }
        if( $(this).find('#item2') ){
            $Boxee.animate({ backgroundColor:'red' });
        }
    });
});

Now i wonder why i put $nav.each….

---

I was also trying to figure out more dynamic/simpler way of doing something like that but I couldnt figure that out.. surprise surprise… I’d appreciate if someone could point me to the direction with that one as well ( though I’d still like to know why my code doesnt work )

Answer 1

You don’t have to loop thru $Nav. jQuery click will bind to all li if you say $('#Nav li').click(...)

Reason for your code to not work is: $(this).find('#item1') – here $(this) means the li, so you’re tyring to find #item1 within itself.

Fixed: http://jsfiddle.net/34a5b/1/

var $Nav = $('#Nav li');
var $Boxee = $('#BoxeeBox');
$Nav.click(function() {
    if (this.id == 'item1') {
        $Boxee.animate({
            backgroundColor: 'blue'
        });
    }
    if (this.id == 'item2') {
        $Boxee.animate({
            backgroundColor: 'red'
        });
    }
});

Slightly better (performant) version is to use .delegate ( http://jsfiddle.net/34a5b/9/ ):

$('#Nav').delegate('li', 'click', function() {
        if (this.id == 'item1') {
            $Boxee.animate({
                backgroundColor: 'blue'
            });
        }
        if (this.id == 'item2') {
            $Boxee.animate({
                backgroundColor: 'red'
            });
        }
    });