目標特定的JavaScript對象文字領域和使用jQuery

陣列我似乎無法得到這個工作。我試着做兩件事情目標特定的JavaScript對象文字領域和使用jQuery

A）。獲取以下代碼以正確顯示。第一個元素是顯示「未定義

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

我認爲回答第二個位於第一，但我似乎無法得到正確的目標。

任何幫助表示讚賞

來源

2012-12-27 Rob

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

來源

2012-12-27 00:07:06 MrCode

我只是嘗試它，但它返回 – Rob

我只是嘗試過，但回報：按鈕：[目標對象] 圖片：[對象的對象] 的TextField：[對象的對象] – Rob

第二個巨大的。第一個返回整個列表和子列表。我想一次只針對一個。我的示例目標按鈕。謝謝一堆 – Rob

首先，這與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與field_list的ID，其將代表要向其中將第二個表（因此容器。根據您要使用的正確的jQuery選擇調整此代碼

來源

2012-12-27 00:41:43

目標特定的JavaScript對象文字領域和使用jQuery

回答

相關問題