2

我似乎无法让它工作。我试图做两件事

一种）。获取以下代码以正确显示。第一个元素是 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);
})

和

乙）。试图仅显示字段的列表（与上面的单独列表）。像这样：

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

我认为第二个的答案在于第一个，但我似乎无法正确定位。

任何帮助表示赞赏

4

2 回答 2

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>';

要获得第二个列表：

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 回答
0

首先，这与 JSON 无关。JSON 是一种字符串序列化格式。您在这里拥有的是一个对象文字。

其次，我不知道你为什么用数组将所有对象定义包装在控件中，这似乎很麻烦。您也在以非常非 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>');
    }
}

这段代码填充了你div和 a ul，其中的 idfield_list代表你想要放入第二个列表的容器（所以根据你想要使用的正确的 jQuery 选择器调整这段代码。

于 2012-12-27T00:41:43.537 回答