时间戳

首页 > 解决方案 > 如何使用 jquery each 方法将 html 元素添加到 html 集合的每个元素？

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

问题描述

我有一些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

我怎样才能完成我想做的事情？

谢谢！

标签： jqueryfont-awesome

解决方案

您的代码不起作用，因为.each()(e在您的情况下) 的第二个参数不是 jQuery 元素，而是标准的 HTML 元素。非 jQuery prepend 方法不会将 HTML 字符串作为元素读取。

如果你想走 jQuery 路线（请先看下面！），你不需要 an，.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 值（如f061上面的 CSS）可以从相应图标 ( arrow-right) 的文档页面中检索。FontAwesome 还提供了Unicode Cheatsheet供快速参考。

推荐阅读