2

我正在尝试使用调用 Web 服务的结果动态创建链接列表。我的 HTML 中有该<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>

谁能告诉我哪里出错了？

谢谢。

4

6 回答 6

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

于 2013-03-14T17:36:21.370 回答
1

尝试这个

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

http://jsfiddle.net/uMUzf/

于 2013-03-14T17:35:10.003 回答
1

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

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

你有它的方式，你是添加text到<li>而不是<a>.

于 2013-03-14T17:36:07.387 回答
0

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

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

演示：http: //jsfiddle.net/4WTG3/

尝试这个：

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)
    ));
});
于 2013-03-14T17:36:52.850 回答
0

您需要对象数组，并且您的 append 语句似乎有点过于复杂：

http://jsfiddle.net/x23ja/

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

于 2013-03-14T17:41:08.327 回答
0

我成功地使用了这个

$.each(result, function (i, file) {
                $("#filelist").append('<li><a target="_blank" href="' + downloadUrl + '/' + file.StaticFileId + '">' + file.ShortDesc + '</a></li>');
});
于 2020-06-11T13:37:53.573 回答