附加到html元素时会打印jQuery"undefined"

Question

我正在制作一个jQuery MP3播放器.首先生成歌曲结构(包括有关歌曲的信息),然后使用jQuery将结构附加到div:

function loadFromPlaylist(playlist) {
    var songsStructure;

    for (var i=0; i<playlist.length; i++) {
        songsStructure +=
        "<div id='song" + i + "'>" +
            "<span class='mpPlaylistArtist'>" + playlist[i].artist + "</span>" +
            "<span class='mpPlaylistSong'>" + playlist[i].song + "</span>" +
            "<span class='mpPlaylistAlbum'>" + playlist[i].album + "</span>" +
        "</div>";
    }

    $('#mpTracks').append(songsStructure);
}

除了一件事,这完美地运作.当项目在浏览器中显示时,歌曲上方会打印一个字符串("undefined"),如下所示:

<div id="mpTracks">
    "undefined"
    <div id="song0">...</div>
    <div id="song1">...</div>
</div>

谷歌搜索这个问题产生了很多相关的问题,但这对我没有帮助.

有谁知道问题可能是什么？

Answer 1

在使用之前将变量初始化为空字符串:

var songsStructure = '';

您没有设置初始值,因此将其设置为undefined.根据JS关于undefined连接的规则,然后将其与for循环生成的字符串连接,从而导致结果.