如何使用jQuery樹結構獲取JSON數據的子級

Question

我試過下面的代碼來獲取數據，但無法獲取孩子。

 var data= [ { "name": "India", "region": "Asia" }, { "name": "Sri Lanka", "region": "Asia" }, { "name": "Maldives", "region": "Asia" }, { "name": "China", "region": "Asia", "subRegion": [ { "name": "Central China" }, { "name": "East China" }, { "name": "Hongkong" }, { "name": "Macao" }, { "name": "South China" } ] }, { "name": "Malaysia", "region": "Asia" }] $(document).ready( function() { $.each(data, function(key, val) { if (!$("#regionContent ul." + val.region).is("*")) { $("<ul />", { "class": val.region, "html": "<li>" + '<input type="checkbox" />' + val.name + "</li>" }) .appendTo("#regionContent") .before('<input type="checkbox" />' + '<b class=' + val.region + ' ><a name="' + val.region + '" >' + val.region + '</a></b>'); } else { $("b." + val.region).each(function() { if (this.textContent === val.region) { $(this).next("ul").append("<li>" + '<input type="checkbox" />' + val.name + "</li>"); } }) } }); }); 

 #regionContent ul li{list-style:none;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="country" id="regionSort"> <div id="regionContent"> <ul></ul> </div> </div> 

預期結果折疊/展開http://s29.postimg.org/idirjntif/image.jpg

復選框的選擇將以樹狀結構表示孩子選擇父級時也會被選中。

Answer 1

您需要遍歷所有子區域並添加它們。 其次，您需要向具有subRegions的所有區域添加事件偵聽器。 我沒有添加正負圖像，但是您可以分別使用hide（）/ show（）函數將它們添加到事件監聽器中。

 var data = [{ "name": "India", "region": "Asia" }, { "name": "Sri Lanka", "region": "Asia" }, { "name": "Maldives", "region": "Asia" }, { "name": "China", "region": "Asia", "subRegion": [{ "name": "Central China" }, { "name": "East China" }, { "name": "Hongkong" }, { "name": "Macao" }, { "name": "South China" }] }, { "name": "Malaysia", "region": "Asia" }] $(document).ready(function() { $.each(data, function(key, val) { if (!$("#regionContent ul." + val.region).is("*")) { $("<ul />", { "class": val.region, "html": "<li>" + '<input type="checkbox" />' + val.name + "</li>" }) .appendTo("#regionContent") .before('<input type="checkbox" />' + '<b class=' + val.region + ' ><a name="' + val.region + '" >' + val.region + '</a></b>'); } else { $("b." + val.region).each(function() { if (this.textContent === val.region) { var extra = ""; if (val.hasOwnProperty("subRegion")) { extra = '<ul id="subRegion_' + val.region + '_' + val.name + '" style="display:none;">'; $.each(val.subRegion, function(k, v) { extra += "<li>" + '<input type="checkbox" />' + v.name + "</li>"; }); extra += "</ul>"; } $(this).next("ul").append('<li id="' + val.region + '_' + val.name + '">' + '<input type="checkbox" />' + val.name + "</li>" + extra); if (val.hasOwnProperty("subRegion")) { var checkbox = document.getElementById(val.region + '_' + val.name); checkbox.addEventListener('click', function() { var subRegions = $('#subRegion_' + val.region + '_' + val.name); if (subRegions.is(':visible')) { subRegions.hide(); } else { subRegions.show(); } }); } } }); } }); }); 

 #regionContent ul li { list-style: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="country" id="regionSort"> <div id="regionContent"> <ul></ul> </div> <ul id="1"></ul> </div>