Question

我有一些li元素，并且我想向每个元素添加一个字体超棒的图标。（我可以直接在HTML代码中执行此操作，但是我想学习更动态地执行此操作）。我尝试过：

HTML：

<ul class="willHaveArrows">
    <li>text 1</li>
    <li>text 2</li>
    <li>text 3</li>
    <li>text 4</li>
    <li>text 5</li>
</ul>

JS：

$('.willHaveArrows li').each((i, e) => e.prepend("<span class='fa fa-arrow-right'></span>"))

但是，我没有将span元素放在li前面（显示了字体真棒箭头），而是将字符串添加到了其中。像这样：

<span class='fa fa-arrow-right'></span> text1
<span class='fa fa-arrow-right'></span> text2
<span class='fa fa-arrow-right'></span> text3
<span class='fa fa-arrow-right'></span> text4
<span class='fa fa-arrow-right'></span> text5

我该如何完成我想做的事情？

谢谢！

Answer 1

您的代码无法正常工作，因为void euqals(unsigned int c_i);（在您的情况下为.each()）的第二个参数不是jQuery元素，而是标准HTML元素。非jQuery prepend method不会将HTML字符串作为元素读取。

如果您想使用jQuery路线（请首先参见下文！），则不需要e，因为jQuery的.each()作用于该集合中的所有项目默认。

.prepend()

$(".willHaveArrows > li").prepend("<span class='fa fa-arrow-right'></span>");

$(".willHaveArrows > li").prepend("<span class='fa fa-arrow-right'></span>");

尽管我应该指出， JavaScript（尤其是jQuery）对于此任务而言过于矫。在CSS中执行此操作效率更高。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <ul class="willHaveArrows"> <li>text 1</li> <li>text 2</li> <li>text 3</li> <li>text 4</li> <li>text 5</li> </ul>

.willHaveArrows > li::before { font-family: "FontAwesome"; content: "\f061"; /* Unicode value from FontAwesome */ display: inline-block; }

.willHaveArrows > li::before { font-family: "FontAwesome"; content: "\f061"; display: inline-block; }

^{对于使用FontAwesome 5及更高版本的人，CSS字体声明为<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<ul class="willHaveArrows">
<li>text 1</li>
<li>text 2</li>
<li>text 3</li>
<li>text 4</li>
<li>text 5</li>
</ul>。}
可以从文档页面中检索相应图标（arrow-right）的
Unicode值（如上述CSS中的font-family: "Font Awesome 5 Free"）。 FontAwesome还提供了Unicode Cheatsheet供快速参考。

Answer 2

我首先要检查<li>是否包含Font Awesome图标，然后使用html()。

$(".willHaveArrows li").each(function() {
    if (!$(this).find(".fa").length) {
        $(this).html("<span class='fa fa-arrow-right'></span>" + $(this).html())
    }
})

单线：

$(".willHaveArrows li").each(function(){$(this).find(".fa").length||$(this).html("<span class='fa fa-arrow-right'></span>"+$(this).html())});

如何使用jquery每个方法在HTML集合的每个元素之前添加一个html元素？

2 个答案: