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 に答える