Javascript Div只追加一次

我有以下代码：

    switch (caseType) {
        case "dates":
            $.each(array.reverse(), function (index, arr) {
                var $accordionOption = $('<div />', {
                    "class": "option",
                    "data-select": 'option',
                    "data-action": 'makePie',
                    text: arr
                });

                $accordionOption.appendTo($accordionOptionContainer);
                $accordionOption.click(function () {
                    cache.select(this);
                });
            });
            break;
        case "cohort":
            $.each(array, function (index, arr) {
                var $accordionOption = $('<div />', {
                    "class": "option",
                    "data-select": 'option',
                    "data-action": 'makePie',
                    text: arr
                });

                $accordionOption.appendTo($accordionOptionContainer);
                $accordionOption.click(function () {
                    cache.select(this);
                });
            });
            break;
        case "period":

            $.each(array, function (index, arr) {
                console.log(arr)
                var $accordionOption = $('<div />', {
                    "class": "option",
                    "data-select": 'option',
                    "data-action": 'makePie',
                    text: arr
                });

                $accordionOption.appendTo($accordionOptionContainer);
                $accordionOption.click(function () {
                    cache.select(this);
                });
            });
            break;

    }

开关（箱式）{
案例“日期”：
$.each（array.reverse（），函数（index，arr）{
变量$accordionOption=$（''{
“类”：“选项”，
“数据选择”：“选项”，
“数据操作”：“makePie”，
文本：arr
});
$accordionOption.appendTo（$accordionOptionContainer）；
$accordionOption。单击（函数（）{
缓存。选择（此）；
});
});
打破
案例“队列”：
$.each（数组、函数（索引、arr）{
变量$accordionOption=$（''{
“类”：“选项”，
“数据选择”：“选项”，
“数据操作”：“makePie”，
文本：arr
});
$accordionOption.appendTo（$accordionOptionContainer）；
$accordionOption。单击（函数（）{
缓存。选择（此）；
});
});
打破
案例“期间”：
$.each（数组、函数（索引、arr）{
控制台日志（arr）
变量$accordionOption=$（''{
“类”：“选项”，
“数据选择”：“选项”，
“数据操作”：“makePie”，
文本：arr
});
$accordionOption.appendTo（$accordionOptionContainer）；
$accordionOption。单击（函数（）{
缓存。选择（此）；
});
});
打破
}

它工作了，它生成元素并将其附加到DOM中

我想把它清理干净，所以我试了一下：

    var $accordionOption = $('<div />', {
        "class": "option",
        "data-select": 'option',
        "data-action": 'makePie'
    });

    switch (caseType) {
        case "dates":
            $.each(array.reverse(), function (index, arr) {
                $accordionOption.text(arr);
                $accordionOption.appendTo($accordionOptionContainer);
            });
            break;
        case "cohort":
            $.each(array, function (index, arr) {
                $accordionOption.text(arr);
                $accordionOption.appendTo($accordionOptionContainer);
            });
            break;
        case "period":

            $.each(array, function (index, arr) {
                $accordionOption.text(arr);
                $accordionOption.appendTo($accordionOptionContainer);
            });
            break;
    }
    $accordionOption.click(function () {
        cache.select(this);
    });

var$accordionOption=$（“”{
“类”：“选项”，
“数据选择”：“选项”，
“数据操作”：“makePie”
});
开关（箱式）{
案例“日期”：
$.each（array.reverse（），函数（index，arr）{
$accordionOption.text（arr）；
$accordionOption.appendTo（$accordionOptionContainer）；
});
打破
案例“队列”：
$.each（数组、函数（索引、arr）{
$accordionOption.text（arr）；
$accordionOption.appendTo（$accordionOptionContainer）；
});
打破
案例“期间”：
$.each（数组、函数（索引、arr）{
$accordionOption.text（arr）；
$accordionOption.appendTo（$accordionOptionContainer）；
});
打破
}
$accordionOption。单击（函数（）{
缓存。选择（此）；
});

但是，我注意到它只附加循环中的最后一个数组项。这是因为每次都必须重新创建变量吗？或者是因为它在添加之前就将所有内容添加到了手风琴选项中？还是覆盖相同的变量

我的最终解决方案：

---

函数getDiv（）{ 返回$（''）{ “类”：“选项”， “数据选择”：“选项”， “数据操作”：“makeTable” }); } $.each（caseType==“dates”？array.reverse（）：数组，函数（index，arr）{ var$accordioOption=getDiv（） .文本（arr） 。单击（函数（）{cache.select（this）}） .附录（$accordionOptionContainer）； });

---

您每次都在追加相同的元素

$('<div />') 

$（“”）

创建一个元素，该元素与每次使用的元素相同

换成这样：

 function getDiv(){
     return  $('<div />', {
        "class": "option",
        "data-select": 'option',
        "data-action": 'makePie'
    });}

    switch (caseType) {
        case "dates":
            $.each(array.reverse(), function (index, arr) {
                $accordionOption.text(arr);
                $accordionOption.appendTo(getDiv());
            });
            break;
        case "cohort":
            $.each(array, function (index, arr) {
                $accordionOption.text(arr);
                $accordionOption.appendTo(getDiv());
            });
            break;
        case "period":

            $.each(array, function (index, arr) {
                $accordionOption.text(arr);
                $accordionOption.appendTo(getDiv());
            });
            break;
    }
    $accordionOption.click(function () {
        cache.select(this);
    });

函数getDiv（）{ 返回$（''）{ “类”：“选项”， “数据选择”：“选项”， “数据操作”：“makePie” });} 开关（箱式）{ 案例“日期”： $.each（array.reverse（），函数（index，arr）{ $accordionOption.text（arr）； $accordiooption.appendTo（getDiv（））； }); 打破 案例“队列”： $.each（数组、函数（索引、arr）{ $accordionOption.text（arr）； $accordiooption.appendTo（getDiv（））； }); 打破 案例“期间”： $.each（数组、函数（索引、arr）{ $accordionOption.text（arr）； $accordiooption.appendTo（getDiv（））； }); 打破 } $accordionOption。单击（函数（）{ 缓存。选择（此）； });

---

您每次都在追加相同的元素

$('<div />') 

$（“”）

创建一个元素，该元素与每次使用的元素相同

换成这样：

 function getDiv(){
     return  $('<div />', {
        "class": "option",
        "data-select": 'option',
        "data-action": 'makePie'
    });}

    switch (caseType) {
        case "dates":
            $.each(array.reverse(), function (index, arr) {
                $accordionOption.text(arr);
                $accordionOption.appendTo(getDiv());
            });
            break;
        case "cohort":
            $.each(array, function (index, arr) {
                $accordionOption.text(arr);
                $accordionOption.appendTo(getDiv());
            });
            break;
        case "period":

            $.each(array, function (index, arr) {
                $accordionOption.text(arr);
                $accordionOption.appendTo(getDiv());
            });
            break;
    }
    $accordionOption.click(function () {
        cache.select(this);
    });

函数getDiv（）{ 返回$（''）{ “类”：“选项”， “数据选择”：“选项”， “数据操作”：“makePie” });} 开关（箱式）{ 案例“日期”： $.each（array.reverse（），函数（index，arr）{ $accordionOption.text（arr）； $accordiooption.appendTo（getDiv（））； }); 打破 案例“队列”： $.each（数组、函数（索引、arr）{ $accordionOption.text（arr）； $accordiooption.appendTo（getDiv（））； }); 打破 案例“期间”： $.each（数组、函数（索引、arr）{ $accordionOption.text（arr）； $accordiooption.appendTo（getDiv（））； }); 打破 } $accordionOption。单击（函数（）{ 缓存。选择（此）； });

---

如果唯一的区别是

日期中的数组，那么简单的内联怎么样

$.each（caseType==“dates”？数组。reverse（）：数组，函数（索引，arr）{
变量$accordionOption=$（''{
“类”：“选项”，
“数据选择”：“选项”，
“数据操作”：“makePie”
});
$accordionOption.text（arr）；
$accordionOption.appendTo（$accordionOptionContainer）；