如何在我的javascript生成列表中的<li>部分中放置更多超链接
How to put more hyperlinks in the <li> part in my javascript generated list
我有一个javascript创建一个列表。所有作品,请看我的小提琴: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,以便它从脚本读取/创建更多超链接?
此外,我还想在单个<ul>
中添加更多<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>
<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>
亲切问候
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"));
小提琴
您可以单独附加它们(如果您将其合并到循环中,这也将起作用):
Menu.prototype.render = function(root) {
var ul = $("<ul></ul>");
var li = $("<li></li>");
li.append($("<a></a>", {
href: this.data.url,
text: this.data.title
})).appendTo(ul);
// More links can be added into the li
li.append($("<a></a>", {
href: this.data.url,
text: this.data.title
}));
ul.appendTo(root);
};
您也可以通过相同的方式将li
项添加到ul
中:
ul.append(li.clone());
我稍微修改了代码以创建您想要的结构。 检查评论。
var Menu = function(data) {
this.data = (data.length) ? data : [data];
};
Menu.prototype.render = function(root) {
// generate one li per menu item and one anchor for each element from data
var li = $("<li></li>");
$.each(this.data, function(link) {
$("<a></a>", {
href: link.url,
text: link.title
}).appendTo(li);
});
li.appendTo($('#menuContainer'));
};
Menu.renderMenus = function(menus, root) {
// create global ul here and add and id so you can point later to it
var ul = $("<ul></ul>").attr('id','menuContainer');
ul.appendTo(root);
$.each(menus, function(key, val) {
var m = new Menu(val);
m.render(root);
});
}
// modified the structure a little. you other arrays for anchors
var menu = [
[{
title: "Link1",
menuCaption: "Best Known For Caption",
url: "/best-known-for",
},{
title: "Link2",
menuCaption: "Best Kno2wn For Caption",
url: "/best-known-for2",
}
],
{
title: "Link1",
menuCaption: "Choose a life Event",
url: "/life-events",
}
];
Menu.renderMenus(menu, $("#container"));
})
<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>
<li>
<a href="/life-events">Link1</a>
<a href="/life-events2">Link2</a>
</li>
</ul>
</div>
这样行得通吗?
相关文章:
- 制作一个不带HTML a标记但在动画播放完毕后指向其他页面的超链接
- 单击超链接时,如何使用Google Maps API v3缩放地图
- 用超链接替换URLS
- 使用JavaScript从超链接加载时的默认下拉值
- Hammer.js阻止在Android Webview中点击超链接
- 将超链接添加到“;标题“;标记文本
- 文本建议的超链接
- 用Javascript按钮替换Javascript超链接
- 删除默认的ui超链接行为
- 谷歌将广告超链接映射到国家标记
- 如何在点击超链接时调用fullcalendar回调
- 单击“禁用其他超链接”
- 为Angularjs制作超链接
- 指向的超链接刚刚赢得'不起作用
- 如何将超链接添加到通过传单创建的传单多段线.Draw
- 如何禁用鼠标中键单击超链接以在新选项卡或新窗口中打开
- 如何在每个动态创建的ImageButton周围包装超链接?Visual Studio
- 当一个超链接标签被点击时,使用jquery添加一个类到正文中,这个超链接标签位于li标签的子html中
- 动态添加了li's,现在通过超链接动态删除它们
- 如果li class等于,则添加超链接