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

Question

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

从类名数组中，我使用 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>');

    }

我还有一个导航元素。该列表具有相同数量的具有 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>

Answer 1

你甚至不需要 for 循环

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

Answer 2

你可以这样做：

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link data-require="font-awesome@*" data-semver="4.3.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />

<nav>
  <ul id="nav">
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
  </ul>
</nav>

Answer 3

我建议，将 <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]
    });
});

var iconsArray = ['fa-search', 'fa-toggle-up', 'fa-link'];
$('#nav li a').append(function(i) {
  return $('<i>', {
    'class': 'fa ' + iconsArray[i]
  });
});

<link data-require="font-awesome@*" data-semver="4.3.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>

  <ul id="nav">

    <li>
      <a href=""></a>
    </li>
    <li>
      <a href=""></a>
    </li>
    <li>
      <a href=""></a>
    </li>

  </ul>

</nav>

或者，使用纯 JavaScript：

var iconsArray = ['fa-search', 'fa-toggle-up', 'fa-link'],
    // using CSS notation with document.querySelectorAll() to
    // retrieve the relevant <a> elements:
    navAnchors = document.querySelectorAll('#nav li a'),
    // using Array.prototype.slice() (with Function.prototype.call())
    // to convert the NodeList to an array:
    navAnchorsArray = Array.prototype.slice.call(navAnchors, 0),
    // creating an <i> element:
    iElem = document.createElement('i'),
    // an empty variable for use within the loop (later):
    clone;

// all created <li> elements need the 'fa' class for
// font-awesome, so we add that here (once, for all),
// using the HTMLElement.classList API:
iElem.classList.add('fa');

// iterating over each of the <a> elements held in the array:
navAnchorsArray.forEach(function (anchor, index) {
  // cloning the created <i> element (to avoid calling
  // document.createElement() multiple times):
  clone = iElem.cloneNode();

  // adding the class-name from the iconsArray:
  clone.classList.add(iconsArray[index]);

  // appending the cloned/created <i> to the <a>:
  anchor.appendChild(clone);
});

var iconsArray = ['fa-search', 'fa-toggle-up', 'fa-link'],
    navAnchors = document.querySelectorAll('#nav li a'),
    navAnchorsArray = Array.prototype.slice.call(navAnchors, 0),
    iElem = document.createElement('i'),
    clone;

iElem.classList.add('fa');

navAnchorsArray.forEach(function (anchor, index) {
  clone = iElem.cloneNode();
  clone.classList.add(iconsArray[index]);
  anchor.appendChild(clone);
});

<link data-require="font-awesome@*" data-semver="4.3.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>

  <ul id="nav">

    <li>
      <a href=""></a>
    </li>
    <li>
      <a href=""></a>
    </li>
    <li>
      <a href=""></a>
    </li>

  </ul>

</nav>

参考资料：

• JavaScript：
  • Array.prototype.forEach()。
  • Array.prototype.slice().
  • document.createElement().
  • document.querySelectorAll()。
  • Element.classList。
  • Function.prototype.call()。
  • Node.appendChild()。
• jQuery:
  • append()。

Answer 4

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

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>');

}