[英]Append “<li><a hef='#'>text</a></li>” to “<ul>” using jQuery foreach & append
I am trying to create a list of links dynamically using the results from a call to a web service.我正在尝试使用调用 Web 服务的结果动态创建链接列表。 I have the
<ul>
element in my HTML.我的 HTML 中有
<ul>
元素。
<ul id="myList"></ul>
And I am trying to use jQuery foreach and append to create the list items.我正在尝试使用 jQuery foreach 和 append 来创建列表项。
Given the following data:鉴于以下数据:
var options = {
{href: "#", text:"text"},
{href: "#", text:"text"},
{href: "#", text:"text"},
{href: "#", text:"text"}
};
I thought I could create the list using the following script:我想我可以使用以下脚本创建列表:
$each(options, function(index) {
$("#myList").append($("<li>", {}).append($("<a>", { href: options[index].href })).text(options[index].text));
});
Although it is kind of working, the text is ending up outside of the anchor elements.虽然它有点工作,但文本最终在锚元素之外。 What I want to end up with is:
我想结束的是:
<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>
Can anybody tell me where I am going wrong?谁能告诉我我哪里出错了?
Thanks.谢谢。
You were close, but your syntax is slightly wrong.你很接近,但你的语法有点错误。
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)));
});
You need an array of options which contain your objects.您需要一组包含您的对象的选项。 You also had a syntax error on
$.each
.您在
$.each
上也有语法错误。 Example: http://jsfiddle.net/5ZDZX/1/示例: http : //jsfiddle.net/5ZDZX/1/
Try this试试这个
$.each(options, function(index) {
$("#myList").append($("<li>").append($("<a>", { href: options[index].href , text : options[index].text})));
});
I think you might be nesting the append
s incorrectly.我认为您可能错误地嵌套了
append
。 Try:尝试:
$.each(options, function(index) {
$("#myList").append(
$("<li>", {}).append(
$("<a>", { href: options[index].href }).text(
options[index].text
)
)
);
});
The way you had it, you were adding the text
to the <li>
and not the <a>
.按照您的方式,您将
text
添加到<li>
而不是<a>
。
That's because you're setting the .text
of the li
not the a
tag.那是因为您设置的是
li
的.text
而不是a
标签。
Also, your option
object is set up incorrectly using { }
instead of [ ]
此外,您的
option
对象使用{ }
而不是[ ]
设置不正确
DEMO: http://jsfiddle.net/4WTG3/演示: http : //jsfiddle.net/4WTG3/
Try this:试试这个:
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)
));
});
You need array of objects and your append statement seems a bit overly complicated:您需要对象数组,而您的 append 语句似乎有点过于复杂:
http://jsfiddle.net/x23ja/ http://jsfiddle.net/x23ja/
You also needed to use $.each
instead of $each
您还需要使用
$.each
而不是$each
I used this succesfully我成功地使用了这个
$.each(result, function (i, file) {
$("#filelist").append('<li><a target="_blank" href="' + downloadUrl + '/' + file.StaticFileId + '">' + file.ShortDesc + '</a></li>');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.