使用JavaScript通过数组元素循环动态添加可折叠div

我试图使用JavaScript循环一个数组，并将可折叠div附加到可折叠set div。我让它工作了，但不确定发生了什么。我搜索了stackoverflow，但没有找到直接的答案。我还使用了控制台，我可以得到数组中的每个值以显示在控制台中

我试图让一周中的每一天都显示出来，这样用户就可以点击这一天来查看时间列表。目前，我的代码只会导致星期一作为标题出现，然后可以单击并展开标题。展开后，它将显示一周中其余的几天。我猜我做事的顺序有问题

以下是我的javascript代码：

$(document).on("pagebeforeshow","#ClassTimes",function(){
  $("#classList").empty();
  var collapsibleSet = $("#classList");
  var collapsible = $('<div data-role="collapsible"></div>');
  for (i=0; i<showPrice.length; i++) {
    var maki = showPrice[i].day;
    collapsible.append("<h2>" + maki + "</h2>");
  }
  collapsibleSet.append(collapsible);
  collapsibleSet.trigger('create');
});

$（document）.on（“pagebeforeshow”，“#ClassTimes”，function（））{
$（“#类列表”）.empty（）；
var collapsableset=$（“#类列表”）；
var可折叠=$（''）；
对于（i=0；i您需要为或
$创建一个可折叠的内部。每个
循环。然后将它们附加到可折叠集，并使用
.collapsableset（）
刷新它

var可折叠=”；
$。每个（显示价格、功能（i、v）{
可折叠+=“”+v.day+“内容
”；
});
$（“#类列表”）.append（可折叠）.collapsableset（）；


var collapsible = '';

$.each(showPrice, function (i, v) {
  collapsible += "<div data-role='collapsible'><h1>" + v.day + "</h1><p>contents</p></div>";
});

$("#classList").append(collapsible).collapsibleset();