1

リストを作成するJavaScriptがあります。すべての作品、私のフィドルを参照してください：http: //jsfiddle.net/mauricederegt/mjdyW/4/

今、このスクリプトは以下を生成します：

<div id="container">
  <ul>
    <li>
      <a href="/best-known-for">Link1</a>
    </li>
  </ul>
  <ul>
    <li>
      <a href="/life-events">Link1</a>
    </li>
  </ul>
</div>

ご覧のとおり、<li>パーツにはハイパーリンクが1つだけあります。<li>スクリプトが次のようなリストを生成するように、パーツにハイパーリンクを追加したいと思います。

<div id="container">
  <ul>
    <li>
      <a href="/best-known-for">Link1</a>
      <a href="/best-antoher">Some oher link</a>
      <a href="/best-antoher2">Another oher link</a>
    </li>
  </ul>
  <ul>
    <li>
      <a href="/life-events">Link1</a>
      <a href="/life-events2">Link2</a>
    </li>
  </ul>
</div>

スクリプトからより多くのハイパーリンクを読み取ったり作成したりするようにJavaScriptを編集するにはどうすればよいですか？

また、これもちょっとこだわって、1つ<li>に追加したいです。<ul>私の最終目標は次のようになります。

<div id="container">
  <ul>
    <li>
      <a href="/best-known-for">Link1</a>
      <a href="/best-antoher">Some oher link</a>
      <a href="/best-antoher2">Another oher link</a>
    </li>
    <li>
      <a href="/best-known-for2">Link2</a>
      <a href="/best-antoher2">Some oher link2</a>
      <a href="/best-antoher22">Another oher link2</a>
    </li>
  </ul>
  <ul>
    <li>
      <a href="/life-events">Link1</a>
      <a href="/life-events2">Link2</a>
    </li>
  </ul>
</div>

敬具

4

4 に答える 4

3 
var Menu = function(data) {
    this.data = data;
};

Menu.prototype.render = function() {
    //console.log(this.data)
    var ul = $("<ul />");
    $.each(this.data, function(i, e) {
        var li = $("<li />");
        $.each(e, function(j, f) {
            li.append($("<a></a>", {
                href: f.url,
                text: f.title
            }));
        });
        ul.append(li);
    });
    return ul;
};

Menu.renderMenus = function(menus, root) {
    $.each(menus, function(key, val) {
        var m = new Menu(val),
            ul = m.render();
        ul.appendTo(root);
    });
}

var menu = 
[
    [//first ul
        [ //first li 
            { //first <a> element
                title: "First UL, First li, First a",
                menuCaption: "Best Known For Caption",
                url: "/best-known-for"
            },
            { //second <a> element
                title: "First UL, First li, Second a",
                menuCaption: "Best Known For Caption",
                url: "/best-known-for"
            }
        ],
        [ //second li 
            { //only <a> element
                title: "First UL, Second li, First a (not first-child, and not red)",
                menuCaption: "Choose a life Event",
                url: "/life-events"
            }
        ]
    ],
    [//second ul
        [ //first li in second ul
            { //only <a> element
                title: "Second UL, First li, First a",
                menuCaption: "Hello Kitty",
                url: "/google"
            },
            { //second <a> element
                title: "Second UL, First li, Second a",
                menuCaption: "Best Known For Caption",
                url: "/best-known-for"
            }
        ]
    ] //you can add as many <li> or <a> elements you wish by following the 
      //pattern in this object literal
];


Menu.renderMenus(menu, $("#container"));​

フィドル

于 2012-08-16T23:09:34.620 に答える
1

それらを個別に追加できます（これは、ループに組み込んだ場合にも機能します）。

Menu.prototype.render = function(root) {
    var ul = $("<ul></ul>");
    var li = $("<li></li>");
    li.append($("<a></a>", {
        href: this.data.url,
        text: this.data.title
    })).appendTo(ul);

    // More links can be added into the li
    li.append($("<a></a>", {
        href: this.data.url,
        text: this.data.title
    }));

    ul.appendTo(root);
};

同じ方法でliアイテムを追加することもできます。ul

ul.append(li.clone());
于 2012-08-16T22:54:40.470 に答える
1

コードを少し変更して、必要な構造を作成しました。コメントを確認してください。

var Menu = function(data) {
       this.data = (data.length) ? data : [data]; 
    };

    Menu.prototype.render = function(root) {
        // generate one li per menu item and one anchor for each element from data
        var li = $("<li></li>");
        $.each(this.data, function(link) { 
            $("<a></a>", {
                href: link.url,
                text: link.title
            }).appendTo(li);
        });
        li.appendTo($('#menuContainer'));
    };

    Menu.renderMenus = function(menus, root) {
        // create global ul here and add and id so you can point later to it
        var ul = $("<ul></ul>").attr('id','menuContainer');
        ul.appendTo(root);
        $.each(menus, function(key, val) {
            var m = new Menu(val);
            m.render(root);
        });
    }


    // modified the structure a little. you other arrays for anchors
    var menu = [
        [{
            title: "Link1",
            menuCaption: "Best Known For Caption",
            url: "/best-known-for",

        },{
            title: "Link2",
            menuCaption: "Best Kno2wn For Caption",
            url: "/best-known-for2",

        }
           ],

            {
            title: "Link1",
            menuCaption: "Choose a life Event",
            url: "/life-events",
        }


    ];

    Menu.renderMenus(menu, $("#container"));
})
于 2012-08-16T23:22:33.660 に答える
-4 
<div id="container">
  <ul>
    <li>
      <a href="/best-known-for">Link1</a>
      <a href="/best-antoher">Some oher link</a>
      <a href="/best-antoher2">Another oher link</a>
    </li>
    <li>
      <a href="/best-known-for2">Link2</a>
      <a href="/best-antoher2">Some oher link2</a>
      <a href="/best-antoher22">Another oher link2</a>
    </li>
    <li>
      <a href="/life-events">Link1</a>
      <a href="/life-events2">Link2</a>
    </li>
  </ul>
</div>

それは機能しますか？

于 2012-08-16T22:43:17.640 に答える