2

私はこれを機能させることができないようです。私は2つのことをしようとしています

A)。次のコードを取得して、正しく表示します。最初の要素は show 'undefined

<ul>
<li>Button
<ul>
 <li>x:1</li>
 <li>y:2</li>
 <li>width:3</li>
 <li>height:4</li>
</ul>
</ul>

これが私のコードです：

$(document).ready(function() {
var data = {
    "Controls": [{
            "Button":[{ "x": "1","y": "2","width": "3","height": "4" }],

            "Image":[{"x": "5","y": "6","width": "7","height": "8"}],

            "TextField":[{"x": "9","y": "10","width": "11","height": "12"}]
        }]
}

var str = '<ul>';
$.each(data.Controls, function(k, v) {
    str += '<li>' + k[0] + '</li><ul>';
    for(var kk in v.Button[0]){
        str += '<li>' + kk + ':' + v.Button[0][kk] + '</li>';
    }
    str += '</ul>';
});
str += '</ul>';
$('div').append(str);
})

と

B）。フィールドだけのリスト（上記とは別のリスト）を表示しようとしています。このような：

<li>Button</li>
<li>Image</li>
<li>TextField</li>

2 番目の答えは 1 番目にあると思いますが、ターゲットを正しく設定できないようです。

どんな助けでも大歓迎です

4

2 に答える 2

0

まず、これは JSON とは関係ありません。JSON は文字列シリアル化形式です。ここにあるのはオブジェクト リテラルです。

第二に、すべてのオブジェクト定義を Controls 内にラップして配列を使用する理由がわかりません。また、非常に非jQueryの方法で物事を行っています。

次のようなことを試すことができます：

var data = {
    "Controls": {
            "Button":{ "x": "1","y": "2","width": "3","height": "4" },

            "Image":{"x": "5","y": "6","width": "7","height": "8"},

            "TextField":{"x": "9","y": "10","width": "11","height": "12"}
        }
}

$('div').append('<ul id="outer_ul">');
$.each(data.Controls, function(key, value) {
    $('#outer_ul').append('<li>' + key + '</li>', '<ul id="' + key +'">');
    $('#field_list').append('<li>' + key + '</li>');
    $.each(value, function(key2, value2) {
        $('#' + key).append('<li>' + key2 + ':' + value2 + '</li>');
    }
}

このコードは、2 番目のリストを配置するコンテナーを表すid を使用して、ユーザーと のdiv両方にデータを入力します (したがって、使用する適切な jQuery セレクターに従ってこのコードを調整します。ulfield_list

于 2012-12-27T00:41:43.537 に答える
0

デモ

最初のリストを取得するには:

var str = '<ul>';
var target = "Button";

str += '<li>' + target + '<ul>';
$.each(data.Controls[0][target][0], function(kk, vv){
    str += '<li>' + kk + ':' + vv + '</li>';
});
str += '</ul></li>';

str += '</ul>';

2 番目のリストを取得するには:

var str = '<ul>';
$.each(data.Controls[0], function(k,v) {
    str += '<li>' + k + '</li>';
});
str += '</ul>';

それらをインデックスでターゲットにするには、次のようにしButtonます0。

var str = '<ul>';
var target = 0;
var count = 0;

$.each(data.Controls[0], function(k,v) {
    if(count == target)
    {
        str += '<li>' + k + '<ul>';

        $.each(v[0], function(kk, vv){
            str += '<li>' + kk + ':' + vv + '</li>';
        });
        str += '</ul></li>';
        return false; // <-- break because we got what we wanted
    }
    count++;
});

str += '</ul>';
于 2012-12-27T00:07:06.103 に答える