我会非常感谢一些指导甚至解决方案!
从一个类名数组中,我使用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>
Q值。如何将返回的图标集附加/前置到正确的导航项?
要清楚,第一个数组值适用于第一个导航项,依此类推。
我确信那里有一些东西可以回答这个问题,但强大的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>
答案 0 :(得分:4)
你甚至不需要for循环
$('#nav li').each(function(i) {
$(this).append('<i class="fa' + ' ' + iconsArray[i] + '"></i>')
})
答案 1 :(得分:2)
你可以这样做:
var iconsArray = ['fa-search', 'fa-toggle-up', 'fa-link'];
$('#nav li a').append(function(i) {
return '<i class="fa ' + iconsArray[i] + '"></i>';
});
&#13;
<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>
&#13;
答案 2 :(得分:2)
我建议将<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]
});
});
&#13;
<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>
&#13;
或者,使用纯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);
});
&#13;
<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>
&#13;
参考文献:
答案 3 :(得分:0)
如果你想在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>');
}