javascript - 如何在我的 javascript 生成列表的 <li> 部分中放置更多超链接

Question

我有一个创建列表的 JavaScript。一切正常，请参阅我的 fiddle :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，以便它可以从脚本中读取/创建更多超链接？

另外，我还想补充一下<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>

亲切的问候

Answer 1

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"));​

FIDDLE