Question

问题：我有HTML列表，li > a内的u，我在JS中创建了数组，如：

var list= [
{
    date: "02.2013",
    name: "First",
    icon: "fa fa-heart"
},
{
    date: "05.2014",
    name: "Second",
    icon: "fa fa-flask"
},
{
    date: "03.2012",
    name: "Third",
    icon: "fa fa-gavel"
},
{
    date: "06.2015",
    name: "Fourth",
    icon: "fa fa-graduation-cap"
},
{
    date: "08.2017",
    name: "Fifth",
    icon: "fa fa-trophy"
}];

我想添加＆＃34; ICON＆＃34;内容作为类的一个。结果应该是这样的：

                 <ul>
                    <li>
                        <a href="#"  class="fa fa-heart"  aria-hidden="true"></a>
                    </li>
                    <li>
                        <a href="#"  class="fa fa-flask" aria-hidden="true"></a>
                    </li>
                    <li>
                        <a href="#"   class="fa fa-gavel" aria-hidden="true"></a>
                    </li>
                    <li>
                        <a href="#"  class="fa fa-graduation-cap" aria-hidden="true"></a>
                    </li>
                    <li>
                        <a href="#"  class="fa fa-trophy" aria-hidden="true"></a>
                    </li>
                </ul>

我可以在控制台中显示每个＆＃34; ICON＆＃34;在表格中，与＆＃34; a＆＃34;相同但我不知道下一步应该是什么

我怎样才能参加这些课程＆＃34;从数组并把它放在链接？

for / foreach？

我要求提示，而不是解决方案 - 感谢每一条评论bros

Answer 1

JS解决方案：

var html_content = "<ul>";
for (var i=0; i<list.length; i++){
    html_content += '<li><a href="#"  class="'+list[i]['icon']+'"  aria-hidden="true"></a>';
}
html_content+= "</ul>";

Answer 2

获取链接的集合，循环遍历它们，并从数组中添加相应的类。

var links = document.querySelectorAll("li > a");
var len = Math.min(links.length, list.length);
for (var i = 0; i < len; i++) {
    links[i].className = list[i].icon;
}

如何从数组中获取值并将其作为类添加到html项目

2 个答案: