首页 > 解决方案 > 如何创建具有两个数组的引导列表组?

问题描述

我目前正在创建一个仪表板,我想创建一个“引导列表组”,它应该显示当前仪表板的朋友列表。

我给了这样的数组:

我想在 javascript 中创建一个方法,以便结果看起来像这样。

<div class="list-group">
  <a href="/dashboard/id1" class="list-group-item list-group-item-action">name1</a>
  <a href="/dashboard/id2" class="list-group-item list-group-item-action">name2</a>
  <a href="/dashboard/id3" class="list-group-item list-group-item-action">name3</a>
</div>

很想在这里你将如何管理这个,因为我有点绝望并且不知道如何做到这一点。

标签: javascripthtmlbootstrap-4

解决方案


你可以做这样的事情

const friendsID = ["id1", "id2", "id3"]
const friendsName = ["name1", "name2", "name3"]
let i = 0;
for (i = 0; i < friendsID.length; i++) {
  let list = '<a href="/dashboard/' + friendsID[i] + '" class="list-group-item list-group-item-action">' + friendsName[i] + "</a>"
  $(".list-group").append(list)
}
<div class="list-group">
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


推荐阅读