将"<li><a hef='#'>text<a><li> "添加到"<ul> "中，使用jQuery foreach & append。

Question

我试图使用调用Web服务的结果动态地创建一个链接列表。我有 <ul> 元素。

<ul id="myList"></ul>

我试图使用jQuery foreach和append来创建列表项。

给定以下数据，我想我可以使用以下脚本创建列表：

var options = {
    {href: "#", text:"text"},
    {href: "#", text:"text"},
    {href: "#", text:"text"},
    {href: "#", text:"text"}
};

我想我可以用下面的脚本来创建列表。

$each(options, function(index) {
    $("#myList").append($("<li>", {}).append($("<a>", { href: options[index].href })).text(options[index].text));
});

虽然它是一种工作，文本结束了锚元素之外。我想最终的结果是。

<ul id="myList">
  <li><a href="#">Text</a></li>
  <li><a href="#">Text</a></li>
  <li><a href="#">Text</a></li>
  <li><a href="#">Text</a></li>
</ul>

谁能告诉我我哪里做错了？

谢谢。

Answer 1

我想你可能是在嵌套 append错了。试试吧

$.each(options, function(index) {
    $("#myList").append(
        $("<li>", {}).append(
            $("<a>", { href: options[index].href }).text(
                options[index].text
            )
        )
    );
});

你之前的做法是，你在加上... text 至 <li> 而非 <a>.

Answer 2

你已经很接近了，但你的语法略有错误。

var options = [
    {href: "#", text:"text"},
    {href: "#", text:"text"},
    {href: "#", text:"text"},
    {href: "#", text:"text"}
];

$.each(options, function(index) {
    $("#myList").append($("<li>", {}).append($("<a>", { href: options[index].href }).text(options[index].text)));
});

你需要一个包含对象的选项数组。你在 $.each. 例如：。http:/jsfiddle.net5ZDZX1

Answer 3

试试这个

$.each(options, function(index) {
    $("#myList").append($("<li>").append($("<a>", { href: options[index].href , text : options[index].text})));
});

http:/jsfiddle.netuMUzf

Answer 4

那是因为你设置了 .text 的 li 不 的 a 标签。

另外，你的 option 对象的设置不正确，使用 { } 而不是 [ ]

DEMO: http:/jsfiddle.net4WTG3

试试这个。

var options = [
    {href: "#", text:"text"},
    {href: "#", text:"text"},
    {href: "#", text:"text"},
    {href: "#", text:"text"}
];

$.each(options, function(index) {
    $("#myList")
    .append($("<li>", {})
        .append($("<a>", { href: options[index].href }).text(options[index].text)
    ));
});

Answer 5

你需要对象数组，而你的append语句似乎有点过于复杂。

http:/jsfiddle.netx23ja

你还需要使用 $.each 而不是 $each

Answer 6

我成功地使用了这个

$.each(result, function (i, file) {
                $("#filelist").append('<li><a target="_blank" href="' + downloadUrl + '/' + file.StaticFileId + '">' + file.ShortDesc + '</a></li>');
});