Question

我有一个json看起来像

[
{
    "sid": "1",
    "webform_views_add_sublocation_form_tour_name": "4",
    "webform_views_add_sublocation_form_location": "location1",
    "webform_views_add_sublocation_form_sub_location": "sublocation1"
},
{
    "sid": "2",
    "webform_views_add_sublocation_form_tour_name": "4",
    "webform_views_add_sublocation_form_location": "location2",
    "webform_views_add_sublocation_form_sub_location": "sublocation1"
},
{
    "sid": "3",
    "webform_views_add_sublocation_form_tour_name": "4",
    "webform_views_add_sublocation_form_location": "location1",
    "webform_views_add_sublocation_form_sub_location": "sublocation2"
},
{
    "sid": "4",
    "webform_views_add_sublocation_form_tour_name": "4",
    "webform_views_add_sublocation_form_location": "location1",
    "webform_views_add_sublocation_form_sub_location": "sublocation3"
},
{
    "sid": "5",
    "webform_views_add_sublocation_form_tour_name": "4",
    "webform_views_add_sublocation_form_location": "location2",
    "webform_views_add_sublocation_form_sub_location": "sublocation2"
},
{
    "sid": "8",
    "webform_views_add_sublocation_form_tour_name": "4",
    "webform_views_add_sublocation_form_location": "location1",
    "webform_views_add_sublocation_form_sub_location": "sublocation4"
},
{
    "sid": "10",
    "webform_views_add_sublocation_form_tour_name": "6",
    "webform_views_add_sublocation_form_location": "location2",
    "webform_views_add_sublocation_form_sub_location": "sublocation3"
}]

我想将此json作为可缩放的集合位置加载到section部分中，而sublocation是内容部分。

$(document).on('pageshow','#locations' ,function(event, ui){
var tourid = $.urlParam('tourid');
$('#location-list').empty(); 
        $.getJSON('url', function(data) {

            $.each(data,function(i,row){
                 if(tourid == row.webform_submissions_webform_views_add_sublocation_form__webf){
            $('#location-list').append('<div data-role="collapsible"><h3>'+row.webform_submissions_webform_views_add_sublocation_form__webf_1+'</h3><ul data-role="listview"><li><a href="#">'+row.webform_submissions_webform_views_add_sublocation_form__webf_2+'</a></li></ul></div>');
            $('#location-list').collapsibleset('refresh');
                 }
            });
        });
    });

我得到了像

这样的输出

location1
 ---sublocation1
location2
 ---sublocation1
location1
 ---sublocation2
location1
 ---sublocation3
location2
 ---sublocation2

但我需要这样

location1
 --sublocation1
 --sublocation2
 --sublocation2
location2
  --sublocation1
  --sublocation2

进入jQuery mobile的可折叠集我该怎么做呢

Answer 1

首先需要通过删除重复项来遍历 JSON 以创建位置的数组。然后再次循环 locations 以创建 collapsibles 。在遍历位置的同时，浏览 JSON 以提取子位置并将其附加到父母那里。

我为每个可折叠添加了位置名称的 class ，以方便附加子位置。

/* add all locations from JSON */
var collapsible = [];
/* remove duplicate locations */
var locations = [];

$.each(data, function (i, v) {
    collapsible.push(v.webform_views_add_sublocation_form_location);
    $.each(collapsible, function (i, v) {
        if ($.inArray(v, locations) === -1) {
            locations.push(v); /* ["location1", "locations"] */
        }
    });
});

/* loop through locations */
$.each(locations, function (i, loc) {
    var parent = loc;
    var elements = '';

    /* loop through JSON */

    $.each(data, function (x, sub) {
        var subLoc = sub.webform_views_add_sublocation_form_sub_location;
        if (sub.webform_views_add_sublocation_form_location == parent) {
            /* sub locations */
            elements += '<li><a href="#">' + subLoc + '</a></li>';
        }
    });

    /* create collapsibles based on number of locations
       add listview, append sub locations and refresh
       collapsible-set at once */

    $("#location-list").append($("<div/>", {
        "data-role": "collapsible",
            "class": parent
    }).append($("<h3/>").text(parent)).append($("<ul/>", {
        "data-role": "listview",
            "data-theme": "b"
    }).append(elements).listview())).collapsibleset('refresh');
});

<强> Demo

基于jQuery mobile中动态部分的动态可折叠集内容

1 个答案: