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; 

    } 

И это сработало, это делает элемент и добавляет его в 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); 
    }); 

Однако я заметил, что он добавляет только последний элемент массива в цикле. Это потому, что переменную нужно воссоздавать каждый раз? Или потому, что он добавляет все к опции аккордеона, прежде чем он добавит? Или перезапись одной и той же переменной?

Мое окончательное решение:

---

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

как о простом инлайн, если в качестве единственным отличием является массив в dates.

$.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); 
    }); 
}); 

Answer 2

Вы прилагая тот же элемент каждый раз.

$('<div />') 

создает элемент, и это же один apended каждый раз

изменить что-то вроде этого:

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); 
    });