javascript - 每个循环中未定义的项目

Question

以下代码有一个 jquery every 语句，它遍历包含 h1、h2、h3、h4 的 div.faq。根据我的逻辑(现在让我失败)，代码应该通过 div 运行选择所有 Header 元素，然后使 h1/h2 成为列表项，使 h3/h4 成为子列表项。由于某种原因，我在每个子列表开始之前不断收到“未定义”元素。

//Declare everything
var sidebar = "";
var sidebar_header = new Array();
var sidebar_items = new Array();
var i = 0;

//Select all elements
$(".faq h3,.faq h4,.faq h1,.faq h2").each(function(index, value){

    // Add an ID to each element
    $(this).attr("id", "item-" + index);

    //If element is h1 or element is h2
    if($(this).is("h1") || $(this).is("h2")){

        sidebar_header[i] = "<li><a href='#item-" + index + "'>" + $(this).text() + "</a>";

        i++;
    //If element is h3 or is h4
    }else if($(this).is("h3") || $(this).is("h4")){

        sidebar_items[i - 1] += "<li><a href='#item-" + index + "'>" + $(this).text() +" </a></li>";

    }


});


var total = i;

//Loop through all list items and add sub list items
for(i=0;i<total;i++){

    sidebar += sidebar_header[i] + "<ul>" + sidebar_items[i] + "</ul></li>";

}

//Append
$(".side").append("<ul>" + sidebar + "</ul>");

一切都“有效”，除了我的结果是:

List item 1
 - Undefined
 - Sub List item 1
 - Sub List item 2
 - Sub List item 3

List item 2
 - Undefined
 - Sub List item 1
 - Sub List item 2

我不知道什么是未定义的。一切都已宣布。我只是将项目添加到已经定义的数组中。我在代码的不同部分运行了几个 console.log ，问题似乎在这里:

sidebar_items[i - 1] += "<li><a href='#item-" + index + "'>" + $(this).text() +" </a></li>";

但我不明白为什么。欢迎提出建议!

更新:

示例链接:http://jsfiddle.net/pgw47ecb/

Answer 1

您正在将一个字符串连接到一个没有值的数组索引上(嗯，它的值为 undefined )。 Javascript 正在愉快地类型转换 undefined到一个字符串并进行连接，所以你最终得到 "undefined" + '<li>...</li>'第一次尝试将新 HTML 添加到该索引时。

您需要初始化 sidebar_items 的每个索引首先到一个空字符串(或者如果未定义该索引的值，则不使用字符串连接)。

$(".faq h3,.faq h4,.faq h1,.faq h2").each(function(index, value){

// Add an ID to each element
$(this).attr("id", "item-" + index);

//If element is h1 or element is h2
if($(this).is("h1") || $(this).is("h2")){

    sidebar_header[i] = "<li><a href='#item-" + index + "'>" + $(this).text() + "</a>";

    i++;
//If element is h3 or is h4
}else if($(this).is("h3") || $(this).is("h4")){
    // Give this index a value: an empty string.
    if(typeof sidebar_items[i - 1] !== "string") sidebar_items[i - 1] = "";

     sidebar_items[i - 1] += "<li><a href='#item-" + index + "'>" + $(this).text() +" </a></li>";

}


});