Question

我正在尝试使用调用Web服务的结果动态创建链接列表。我的HTML中有<ul>元素。

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

我正在尝试使用jQuery foreach并追加创建列表项。

鉴于以下数据：

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

你很接近，但你的语法有些错误。

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.net/5ZDZX/1/

Answer 2

试试这个

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

http://jsfiddle.net/uMUzf/

Answer 3

我认为你可能错误地嵌套了append。尝试：

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

您的方式是，您将text添加到<li>而不是<a>。

Answer 4

这是因为您将.text li设置为a非{/ 1>} option标记。

此外，使用{ }代替[ ]
，您的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) )); });对象设置错误
DEMO：http://jsfiddle.net/4WTG3/

试试这个：

{{1}}

Answer 5

你需要一些对象，你的append语句似乎有点过于复杂：

http://jsfiddle.net/x23ja/

您还需要使用$.each代替$each

Answer 6

我成功使用了

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

使用jQuery foreach＆amp; amp;将“<li> <a hef="#">text</a> </li>”附加到“<ul>”附加</UL>

6 个答案: