首页 > 开发 > JS > 正文

js两个length相同的数组如何同时输出到同一个列表?

2017-09-05 05:51:25  来源:网友分享

如何使用原生javascript或者jQuery把比如以下两个数组对应输出到同一个ul列表里面?

//显示文本var Texts = [    "http://www.url.com0",    "http://www.url.com1",    "http://www.url.com2",    "http://www.url.com3",    "http://www.url.com4",    "http://www.url.com5",    "http://www.url.com6",]//文本对应的链接var Links = [    "列表文本内容0",    "列表文本内容1",    "列表文本内容2",    "列表文本内容3",    "列表文本内容4",    "列表文本内容5",    "列表文本内容6",]

输出一个像这样的列表:

<li><a href="http://www.url.com0">列表文本内容0</a></li><li><a href="http://www.url.com1">列表文本内容1</a></li><li><a href="http://www.url.com2">列表文本内容2</a></li><li><a href="http://www.url.com3">列表文本内容3</a></li><li><a href="http://www.url.com4">列表文本内容3</a></li><li><a href="http://www.url.com5">列表文本内容5</a></li><li><a href="http://www.url.com6">列表文本内容6</a></li>

解决方案

var results = ""Texts.forEach(function(item, i) {    results += ['<li><a href="', item, '">', Links[i], '</a></li>'].join('')})

既然两个列表顺序是对应的,那么用下标 i,来找到另一个数组对应位置的值即可。
得到对应的字符串,然后用jQuery转换成DOM对象,插入到对应的ul列表即可。

$('ul').append($(results))

这里的 $('ul')取到你想操作的列表,当然也可以用更精确的CSS选择符,例如id是 links,则改为

$('ul#links').append($(results))