Javascript jquery-将for循环生成的图标附加到列表项中

我将非常感谢一些指导，甚至是一个解决方案

从类名数组中，我使用for循环生成图标集：

// icon array
var iconsArray = ['fa-search','fa-toggle-up','fa-link']; 
var iconsArrayLength = iconsArray.length;

    // loop through array
    for (var i = 0; i < iconsArrayLength; i++) {

        // result
        console.log('<i class="fa' + ' ' + iconsArray[i] + '"></i>');

    }

//图标数组
var iconsArray=['fa-search'、'fa-toggle-up'、'fa-link']；
var iconsArrayLength=iconsArray.length；
//循环阵列
对于（变量i=0；i

我还有一个导航元素。该列表具有相同数量的ID为的项目：

<nav>

    <ul id="nav">

        <li><a href="">link 1</a></li>
        <li><a href="">link 2</a></li>
        <li><a href="">link 3</a></li>

    </ul>

</nav>

问：如何将返回的图标集附加/前置到正确的导航项

要清楚，第一个数组值用于第一个导航项，依此类推

我肯定有什么东西可以回答这个问题，但强大的G似乎并不想把它提供给我

提前谢谢

作为对评论的回应

生成的列表如下所示：

<nav>

    <ul id="nav">

        <li><a href=""><i class="fa fa-search"></i>link 1</a></li>
        <li><a href=""><i class="fa fa-toggle-up"></i>link 2</a></li>
        <li><a href=""><i class="fa fa-link"></i>link 3</a></li>

    </ul>

</nav>

var iconsArray = ['fa-search','fa-toggle-up','fa-link']; 
var iconsArrayLength = iconsArray.length;

// loop through array
for (var i = 0; i < iconsArrayLength; i++) {

/* nav item selector */
var navItem = document.querySelectorAll("#nav li a")[i];
/* creates <i> icon element */
var icon = document.createElement("i");
/* gives classes .fa and .fa-* to the icon element */
icon.className = "fa " + iconsArray[i];
/* add icon to the item in navigation */
navItem.appendChild(icon);

// result
console.log('<i class="fa' + ' ' + iconsArray[i] + '"></i>');

}

您甚至不需要for循环

$('#nav li').each(function(i) {
    $(this).append('<i class="fa' + ' ' + iconsArray[i] + '"></i>')
})

$（'#nav li'）。每个（功能（i）{
$（this.append（“”）
})

您可以这样做：

<nav>

    <ul id="nav">

        <li><a href=""><i class="fa fa-search"></i>link 1</a></li>
        <li><a href=""><i class="fa fa-toggle-up"></i>link 2</a></li>
        <li><a href=""><i class="fa fa-link"></i>link 3</a></li>

    </ul>

</nav>

var iconsArray = ['fa-search','fa-toggle-up','fa-link']; 
var iconsArrayLength = iconsArray.length;

// loop through array
for (var i = 0; i < iconsArrayLength; i++) {

/* nav item selector */
var navItem = document.querySelectorAll("#nav li a")[i];
/* creates <i> icon element */
var icon = document.createElement("i");
/* gives classes .fa and .fa-* to the icon element */
icon.className = "fa " + iconsArray[i];
/* add icon to the item in navigation */
navItem.appendChild(icon);

// result
console.log('<i class="fa' + ' ' + iconsArray[i] + '"></i>');

}

var-iconsArray=['fa-search'，'fa-toggle-up'，'fa-link']；
$（'#nav li a'）。追加（函数（i）{
返回“”；
});






我建议在相关类中添加
：

// iterates over each of the found <a> elements:
$('li a').append(function (i) {
    // i: the index of the current element/node in
    // the collection returned by the selector:

    // returning the created <i> element to the append method:
    return $('<i>', {
        // setting the className of the created element:
        'class' : 'fa ' + iconsArray[i]
    });
});

//迭代找到的每个






如果您只想在javascript中使用它，可以尝试以下方法：

<nav>

    <ul id="nav">

        <li><a href=""><i class="fa fa-search"></i>link 1</a></li>
        <li><a href=""><i class="fa fa-toggle-up"></i>link 2</a></li>
        <li><a href=""><i class="fa fa-link"></i>link 3</a></li>

    </ul>

</nav>

var iconsArray = ['fa-search','fa-toggle-up','fa-link']; 
var iconsArrayLength = iconsArray.length;

// loop through array
for (var i = 0; i < iconsArrayLength; i++) {

/* nav item selector */
var navItem = document.querySelectorAll("#nav li a")[i];
/* creates <i> icon element */
var icon = document.createElement("i");
/* gives classes .fa and .fa-* to the icon element */
icon.className = "fa " + iconsArray[i];
/* add icon to the item in navigation */
navItem.appendChild(icon);

// result
console.log('<i class="fa' + ' ' + iconsArray[i] + '"></i>');

}

var-iconsArray=['fa-search'、'fa-toggle-up'、'fa-link']；
var iconsArrayLength=iconsArray.length；
//循环阵列
对于（变量i=0；i
谢谢。这个答案是正确的，我接受了第一个正确答案。是的，请注意您需要在
a
中添加图标，而不仅仅是
li
。谢谢您的帮助；）不客气，我想补充一点，（在我看来）它比公认答案中的方法更简单。另外，简单的JavaScript方法工作可靠，不依赖于库（尽管我没有尽力补偿那些没有实现，
Array.prototype.forEach（）
或
Element.classList
）的旧浏览器。评论公道。再次感谢。