jQuery Issue Sample

by Jimmy Chandra

HTML

<ul id="stooges">
</ul>

<ul id="animals">
</ul>

CSS

li { cursor: pointer }

JavaScript

$(function() {
    var stooges = [ "Larry", "Curly", "Moe" ];
    
    var $stooges = $("#stooges");
    
    for (var i = 0, l = stooges.length; i < l; i++) {
           var $li = $("<li />")
               .text(stooges[i])
               .click(function() {
                   alert(stooges[i]);    //why is this thing keep showing me Undefined???
               });
            $stooges.append($li);
    }
    
    var animals = ['horse', 'tiger', 'snake'];
    
    var $animals = $("#animals");
    for(var i = 0, l = animals.length; i < l; i++) {
        var animal = animals[i];
        var $li = $("<li />")
            .text(animal)
            .click(function() {
                alert(animal);    //Why is this thing keep showing me "snake"???
            });
        $animals.append($li);
    }
 });