在可折叠/分隔器内动态创建listview

我正在尝试开发一个应用程序，我正在使用jQuery mobile作为UI。有人知道如何使用JavaScript动态地在可折叠（as类别）中添加listview吗

HTML:

欢迎光临！

js:

函数displayFeeds（）{
var feeds=getFeeds（）；
如果（feeds.length==0）{
//如果我们以前有一张表格。。。
$（“#feedList”）.html（“”）；
$（“#introContentNoFeeds”）.show（）；
}否则{
$（“#introContentNoFeeds”）.hide（）；
var s=“”；
对于（var i=0；i首先，创建一个静态可折叠集div
data role=“collapsableset”
，并为其指定一个id或类

<div data-role="page">
  <div data-role="content">
    <div data-role="collapsible-set" id="stuff"></div>
  </div>
</div>



JS解决方案取决于阵列的结构，我创建了一个简单的解决方案只是为了演示

/* array */
var data = [{
    "title": "Category 1",
        "items": [
        "one", "two", "three"]
}, {
    "title": "Category 2",
        "items": [
        "four", "five", "six"]
}, {
    "title": "Category 3",
        "items": [
        "seven", "eight", "nine", "ten"]
}];

/* retrieve data from array */
$.each(data, function (i, v) {

    /* store array of listview items */
    var items = v.items;

    /* create a collapsible */
    var col = $("<div/>", {
        "data-role": "collapsible"
    });

    /* collapsible's title - add it to created collapsible */
    var title = $("<h3/>", {
        text: v.title
    }).appendTo(col);

    /* to store retrieved listview items */
    var list_items = '';

    /* read array of listview items */
    $.each(items, function (x, y) {
        list_items += "<li><a href='#'>" + y + "</li>";
    });

    /* create listview */
    var list = $("<ul/>", {
        "data-role": "listview",
           "id": "listview" + i, // if you want to give each listview an id
              "data-inset": true // or false, it's up to you
    });

    /* add listview items to created listview */
    $(list).append(list_items);

    /* add listview to collapsible */
    $(list).appendTo(col);

    /* finally, add them all into collapsible-set */
    $("#stuff").append(col).collapsibleset().trigger("create");
});

/*数组*/
风险值数据=[{
“标题”：“第1类”，
“项目”：[
“一”、“二”、“三”]
}, {
“标题”：“第2类”，
“项目”：[
“四”、“五”、“六”]
}, {
“标题”：“第3类”，
“项目”：[
“七”、“八”、“九”、“十”]
}];
/*从数组中检索数据*/
$。每个（数据、功能（i、v）{
/*存储listview项的数组*/
可变项目=可变项目；
/*创建一个可折叠的*/
变量列=$（“”{
“数据角色”：“可折叠”
});
/*可折叠文件的标题-将其添加到已创建的可折叠文件中*/
变量标题=$（“”{
正文：v.标题
}).附录（col）；
/*存储检索到的listview项的步骤*/
风险值列表项=“”；
/*读取listview项的数组*/
$。每个（项目、功能（x、y）{
列出项目+=“

您需要手风琴/可折叠集合？每个列表视图都在一个单独的可折叠集合中。谢谢您，master@Omar:），但我想知道如何推送或添加一个新数组，例如在现有类别中添加一个新的“项”或添加一个新的“catogory”？thx。@user305305您可以这样做
<div data-role="page">
  <div data-role="content">
    <div data-role="collapsible-set" id="stuff"></div>
  </div>
</div>

/* array */
var data = [{
    "title": "Category 1",
        "items": [
        "one", "two", "three"]
}, {
    "title": "Category 2",
        "items": [
        "four", "five", "six"]
}, {
    "title": "Category 3",
        "items": [
        "seven", "eight", "nine", "ten"]
}];

/* retrieve data from array */
$.each(data, function (i, v) {

    /* store array of listview items */
    var items = v.items;

    /* create a collapsible */
    var col = $("<div/>", {
        "data-role": "collapsible"
    });

    /* collapsible's title - add it to created collapsible */
    var title = $("<h3/>", {
        text: v.title
    }).appendTo(col);

    /* to store retrieved listview items */
    var list_items = '';

    /* read array of listview items */
    $.each(items, function (x, y) {
        list_items += "<li><a href='#'>" + y + "</li>";
    });

    /* create listview */
    var list = $("<ul/>", {
        "data-role": "listview",
           "id": "listview" + i, // if you want to give each listview an id
              "data-inset": true // or false, it's up to you
    });

    /* add listview items to created listview */
    $(list).append(list_items);

    /* add listview to collapsible */
    $(list).appendTo(col);

    /* finally, add them all into collapsible-set */
    $("#stuff").append(col).collapsibleset().trigger("create");
});