0

jQuery でネストされたリスト ビューを作成しようとしています。データはjsonファイルにあります。次のようになります。

{
    "fakultaeten": [
        {
            "id": "1",
            "name": "Carl-Friedrich Gauß",
            "institut": [
                "Mathematik",
                "Informatik"
            ]
        },
        {
            "id": "2",
            "name": "Lebenswissenschaften",
            "institut": [
                "Biologie/Biotechnologie",
                "Chemie/Lebensmittelchemie"
            ]
        },
        {
            "id": "3",
            "name": "Architektur, Bauingenieurwesen und Umweltwissenschaften",
            "institut": [
                "Department Architektur",
                "Department Bauingenieurwesen und Umweltwissenschaften"
            ]
        },
        {
            "id": "4",
            "name": "Maschinenbau",
            "institut": [
                "test"
            ]
        },
        {
            "id": "5",
            "name": "Elektrotechnik, Informationstechnik, Physik",
            "institut": [
                "Institut für Datentechnik und Kommunikationsnetze",
                "Institut für Elektrische Maschinen, Antriebe und Bahnen"
            ]
        },
        {
            "id": "6",
            "name": "Geistes- und Erziehungswissenschaften",
            "institut": [
                "test"
            ]
        }
    ]
}

私はこのようにデータを呼び出しています：

<script type="text/javascript" charset="utf-8">
    $.getJSON("fakultaeten.js",function(data)
        {
        $.each(data.fakultaeten, function(key,value)
            {
                $.each(value.institut, function(key1,value1)
                {
                    //console.log(value1)
                }

            );
            }
        );
        return false; 
        }
    );
</script>

この HTML コードでデータを表示する方法が少しわかりません。

<div data-role="content">
    <h3>Institut für Nachrichtentechnik</h3>
    <ul id="taskList" data-role="listview"></ul>
</div>

それが基本的な問題であることはわかっていますが、見つけた他のすべての質問とチュートリアルは本当に私を混乱させます.

入れ子になったリストをこのデモのように見せたい: http://jquerymobile.com/demos/1.2.1/docs/lists/lists-nested.html#&ui-page=2-4

4

2 に答える 2

2

それは非常に簡単です: id を持つリスト内にリスト値を入れるだけですtaskList:

<script type="text/javascript" charset="utf-8">
        $.getJSON("fakultaeten.js",function(data)
        {
        var list = $('#taskList');
        $.each(data.fakultaeten, function(key,value)
            {
                var mother = "<li>"+value.name+"<ul>";
                $.each(value.institut, function(key1,value1)
                {
                    var son="<li>"+value1+"</li>";
                    mother+=son;
                }  
            );
                mother+="</ul></li>";
                list.append(mother);  
            }                
        );
        list.listview("refresh");
        return false; 
        }
    );
    </script>
于 2013-07-31T14:06:02.457 に答える