javascript - div 只追加一次

Question

我有以下代码:

    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;

    }

它成功了，它创建了元素并将其 append 到 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);
    });

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

我的最终解决方案:

<小时/>

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

    $.each(caseType == "dates" ? array.reverse() : array, function (index, arr) {
        var $accordionOption = getDiv()
                .text(arr)
                .click(function () { cache.select(this) })
                .appendTo($accordionOptionContainer);
    });

Answer 1

简单的内联怎么样，因为唯一的区别是日期中的数组。

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