Question

我似乎无法让这个工作。我想做两件事

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>

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

感谢任何帮助

Answer 1

<强> Demo

获取第一个列表：

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

Answer 2

首先，这与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>');
    }
}

此代码会填充您div以及ul，其ID为field_list，表示您要将第二个列表放入其中的容器（因此请调整此代码根据你想要使用的正确的jQuery选择器。

目标特定的Javascript对象文字字段和带有jquery的数组

2 个答案: