Is there a tidier/easier way of getting the checkbox element's 'catNum' value when in its click() function?

function createCategoriesList() {



var catNames = new Array(First cat, Second cat, Third cat);

var catImageURLs = new Array(First.png, Second.png, Third.png);



jQuery('<ul/>', {

    id: 'map-cats'

}).appendTo('#map-controls');



for(var i = 0; i < catNames.length; i++ ) {



    var listItem = jQuery('<li/>').appendTo('#map-cats');



    jQuery('<img/>', {

        src: catImageURLs[i],

        alt: ''



    }).appendTo(listItem);



    var checkbox = jQuery('<input/>', {

        type: 'checkbox',

        checked: 'checked',

        id: 'cat_' + i,

        name: 'cat_' + i



    }).appendTo(listItem);

    checkbox.data(catNum, i);



    checkbox.click(function() {

        //alert(The cat num selected is:  + this.data(catNum)); //throws exception

        alert(The cat num selected is:  + jQuery('#' + this.id).data('catNum')); //works but there must be a better way??

    });



    jQuery('<label/>', {

        htmlFor: catImageURLs[i],

        text: catNames[i],

        for: 'cat_' + i



    }).appendTo(listItem);

}

}