jquery

Question

如果能提供一些指导甚至解决方案，我将不胜感激！

从 class 个名称的数组中，我正在使用 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> 和相关的 class:

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

}

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

jquery - append Icons generated by for loop into list items anchor

javascript

append