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

如何使用原生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>
阅读 2.7k
2 个回答
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))

这个很简单的,反正两个数组的length是一样的,那就用循环遍历一遍吧。
给你个参考:

var html = '';
for(var i = 0;i < 7; i++) {
    html += '<li><a href="' + Texts[i] +  '">' + Links[i] + '</a></li>'
}
console.log('html', html)
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题