0

我正在尝试使用对象解析一个 javascript 数组，类似于：

function Obj(MenuText, stuff, someStuff) {
    this.text = MenuText;
    this.stuff = stuff;
        this.someStuff = someStuff;
}

myArray[0] = new Array();
myArray[0][1] = new Obj('MenuText', 'A', 'F');
myArray[0][2] = new Obj('MenuText2', 'A', 'F');
myArray[1] = new Array();
myArray[1][1] = new Obj('Submenu Option', 'A', 'F');
myArray[2] = new Array();
myArray[2][1] = new Obj('Submenu Option', 'A', 'F');

我需要以一种可以通过这种方式创建列表的方式解析数组：

<ul>
<li>MenuText
<ul>
<li>Submenu Option</li>
</ul>
</li>
<li>MenuText2
<ul><li>Submenu Option2</li></ul>
</li>
</ul>

因此，菜单项的菜单选项包含在下一个主要位置，例如，菜单项 4 的按钮将位于 myArray[0][3].MenuText，但将显示的选项位于 myArray[3 ][1...N]，就像你必须反转索引一样。

我希望我已经足够清楚了，非常感谢你们，任何建议或想法都将不胜感激，这是一个给我带来的错误很少且我无法解决的问题。

谢谢！

4

1 回答 1

2

您不需要 jQuery，但您的对象结构似乎很奇怪。

以与嵌套在 DOM 结果中相同的方式将子菜单嵌套在对象结构中会更有意义。

var myArray = [];

function Obj(MenuText, stuff, someStuff) {
    this.text = MenuText;
    this.stuff = stuff;
    this.someStuff = someStuff;
}

myArray[0] = new Obj('MenuText', 'A', 'F');
myArray[0].submenu = new Obj('Submenu Option', 'A', 'F');

myArray[1] = new Obj('MenuText2', 'A', 'F');
myArray[1].submenu = new Obj('Submenu Option', 'A', 'F');

然后创建一个迭代数组的递归函数，并在找到子菜单时进行递归调用。

function makeMenu(menu, parent) {
    var li = parent.appendChild(document.createElement("li"));
    li.appendChild(document.createTextNode(menu.text));

    if (menu.submenu)
        makeMenu(menu.submenu, li.appendChild(document.createElement("ul")));
}

var container = document.body.appendChild(document.createElement("ul"));

for (var i = 0; i < myArray.length; i++)
    makeMenu(myArray[i], container);

这假设您在一个菜单下不会有多个子菜单。这似乎不太可能。

如果一个菜单下实际上可能有多个子菜单，那么您将创建一个子菜单数组。

function Obj(MenuText, stuff, someStuff) {
    this.text = MenuText;
    this.stuff = stuff;
    this.someStuff = someStuff;
    this.submenus = []; // holds the sub menus
}

myArray[0] = new Obj('MenuText', 'A', 'F');
myArray[0].submenus.push(new Obj('Submenu Option', 'A', 'F'));

myArray[1] = new Obj('MenuText2', 'A', 'F');
myArray[1].submenus.push(new Obj('Submenu Option', 'A', 'F'));

并稍微更改一下代码。

function makeMenus(menus, parent) {
    for (var i = 0; i < menus.length; i++) {
        var li = parent.appendChild(document.createElement("li"));
        li.appendChild(document.createTextNode(menus[i].text));

        makeMenus(menus[i].submenus, li.appendChild(document.createElement("ul")));
    }
}

makeMenus(myArray, document.body.appendChild(document.createElement("ul")));

这种结构比您现有的结构更自然。

于 2012-09-21T14:53:43.900 回答