如何使用 jquery 每种方法将 html 元素添加到 html 集合的每个元素之前？

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

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

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

在one-liner中：

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

Answer 2

您的代码无法正常工作，因为 .each() 的第二个参数（在您的例子中是 e）不是 jQuery 元素，而是标准的 HTML 元素. non-jQuery prepend method 不会将 HTML 字符串读取为元素。

如果你想走 jQuery 路线（先看下面！）你不需要 .each() 因为 jQuery默认情况下，.prepend() 作用于集合中的所有项目。

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

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

<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>

虽然我应该指出JavaScript（尤其是jQuery）对于这个任务来说有点过分了。在 CSS.

中执行此操作效率更高

.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;
}

<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>

^{对于那些使用 FontAwesome 5 及以上版本的用户，CSS 字体声明将是 font-family: "Font Awesome 5 Free".}

Unicode 值（如上面 CSS 中的 f061）可以从相应图标的文档页面检索（arrow-right). FontAwesome also provides a Unicode Cheatsheet 以供快速参考。

如何使用 jquery 每种方法将 html 元素添加到 html 集合的每个元素之前？

how to prepend an html element to each element of a html collection using jquery each method?

jquery

font-awesome