为什么我的jquery变量在Firebug控制台中返回未定义的

Question

Here is my code:

var altArr = [];
i = 0;
$('ul.ctopics.topics img').each(function () {
    altArr[i++] = $(this).attr('alt')
});

var linkArr = [];
c = 0;
$('ul.ctopics.topics .activityinstance a').each(function () {
    linkArr[c++] = $(this).attr('href')
});

a = 0;
var scormId = [];
$('ul.ctopics.topics li.modtype_scorm').each(function () {
    scormId[a++] = $(this).attr('id')
});

b = 0;
var idArr = [];

$('.course-matrix .course-matrix-table tr').addClass('locked');

$('.course-matrix .course-matrix-table tr').each(function () {
    idArr[b++] = $(this).attr('id');
    idTr = $(this).attr('id');
    var matchArr = $.inArray(idTr, scormId);
    var selLink = linkArr[matchArr];
    var selAlt = altArr[matchArr];

    $(this).find('td.course-title').wrapInner('<a href="' + selLink + '" class="scorm-link"></a>');
    $(this).find('a.scorm-link').attr('title', selAlt);

    var alt = $(this).find('a.scorm-link').attr('title');
    var indexResult = alt.search("Not");

    if (indexResult >= 0) {
        $(this).removeClass('locked');
        $(this).addClass('not-yet-complete');
        $(this).addClass('unlocked');
    } else {
        $(this).addClass('completed');
        $(this).addClass('unlocked');
        $(this).removeClass('locked');
    }
});

I can't find why I'm getting this error from Firebug. This breaks my succeeding JS codes:

TypeError: alt is undefined
var indexResult = alt.search("Not");

spoiler to get rid of "It looks like your post is mostly code; please add some more details."

Answer 1

You are adding DOM elements dynamically and then searching for them. But as you add them, you can assign to a variable. Such as this (untested) but you get the idea:

Replace this:

$(this).find('td.course-title').wrapInner('<a href="'+selLink+'" class="scorm-link" title=""></a>');
$(this).find('a.scorm-link').attr('title', selAlt);

var alt = $(this).find('a.scorm-link').attr('title');

With something like this:

//first create your nodes, and remember them as variables. Use the $ prefix so you know it is a jquery object that is stored in the variable
var $td = $(this).find('td.course-title');
var $a = $('<a href="'+selLink+'" class="scorm-link"></a>');

//add the link to the cell
$td.append($a);

//then set your attribute. Note you already have the variable so no need to search
$a.attr('title', selAlt)

//if you need you can then extract that title attribute
var alt = $a.attr('title');