问题描述
给定一个嵌套的对象数组，我试图写一个嵌套的无序列表。
数组本身是有组织的，这样每个新的子属性都会启动一个新的对象数组。 该功能需要能够支持n级深度。
我当前的解决方案可以递归地写出我现在需要的所有属性，但是将<li>标签附加到错误的<ul>。
我认为这是因为：
var lowUL = targetUL.querySelector('ul');
我在递归基础案例中使用它来追加<li>。 它只选择它找到的第一个<ul>标记，而不是for循环中从该迭代中动态创建的<ul>标记。
// DATA const org1_depts = [ { name: 'accounting', children: [ { name: 'accounting payable', children: [] }, { name: 'accounting receivable', children: [] }, ], }, { name: 'finance', children: [], }, ] const org2_depts = [ { name: 'accounting', children: [ { name: 'accounting payable', children: [] }, { name: 'accounting receivable', children: [{ name: 'cash', children: [] }, { name: 'check', children: [] }], }, ], }, { name: 'finance', children: [{ name: 'investment', children: [] }], }, ] // FUNCTION function listOrg(orgData,targetUL) { var i; for (i = 0; i < orgData.length; i++) { if (orgData[i].hasOwnProperty('name')) { // Take out the text from the .name property var nameText = document.createTextNode(orgData[i].name); // Define a new <li> tag var newLI = document.createElement('li'); // Append text to new <li> tage - newLI newLI.appendChild(nameText); // Append element to <ul> tag targetUL.appendChild(newLI); } if (orgData[i].hasOwnProperty('children')) { // Define new <ul> tag var newUL = document.createElement('ul'); // Append new <ul> tag var lowUl = targetUL.appendChild(newUL); // Select new lower level <ul> tag var lowUL = targetUL.querySelector('ul'); // Recurse listOrg(orgData[i].children,lowUL); } } } // CALL FUNCTION listOrg(org1_depts,document.getElementById("org1")); listOrg(org2_depts,document.getElementById("org2"));
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <ul id='org1'> Organization 1 </ul> <ul id='org2'> Organization 2 </ul> </body> </html>
在“应收账款”的子名称属性之上放置“应付账款”，这是错误的。
1楼
当递归调用listOrg函数时，应该将newUL变量作为参数而不是lowUL 。
listOrg(orgData[i].children,newUL)这将针对新创建的ul，你不需要使用querySelector
// DATA const org1_depts = [ { name: 'accounting', children: [ { name: 'accounting payable', children: [] }, { name: 'accounting receivable', children: [] }, ], }, { name: 'finance', children: [], }, ] const org2_depts = [ { name: 'accounting', children: [ { name: 'accounting payable', children: [] }, { name: 'accounting receivable', children: [{ name: 'cash', children: [] }, { name: 'check', children: [] }], }, ], }, { name: 'finance', children: [{ name: 'investment', children: [] }], }, ] // FUNCTION function listOrg(orgData,targetUL) { var i; for (i = 0; i < orgData.length; i++) { if (orgData[i].hasOwnProperty('name')) { // Take out the text from the .name property var nameText = document.createTextNode(orgData[i].name); // Define a new <li> tag var newLI = document.createElement('li'); // Append text to new <li> tage - newLI newLI.appendChild(nameText); // Append element to <ul> tag targetUL.appendChild(newLI); } if (orgData[i].hasOwnProperty('children')) { // Define new <ul> tag var newUL = document.createElement('ul'); // Append new <ul> tag var lowUl = targetUL.appendChild(newUL); // Select new lower level <ul> tag var lowUL = targetUL.querySelector('ul'); // Recurse listOrg(orgData[i].children,newUL ); } } } // CALL FUNCTION listOrg(org1_depts,document.getElementById("org1")); listOrg(org2_depts,document.getElementById("org2"));
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <ul id='org1'> Organization 1 </ul> <ul id='org2'> Organization 2 </ul> </body> </html>