Как добавить элемент HTML к каждому элементу коллекции HTML, используя jquery каждый метод? - PullRequest
Новая
       14

Как добавить элемент HTML к каждому элементу коллекции HTML, используя jquery каждый метод?

1 голос
/ 09 июня 2019

У меня есть несколько 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

Как мне добиться того, что я пытаюсь сделать?

Спасибо!

Ответы [ 2 ]

1 голос
/ 09 июня 2019

Ваш код не работает, потому что второй аргумент .each() (e в вашем случае) - это не элемент jQuery, а стандартный элемент HTML. Метод не-jQuery prepend не читает строки HTML как элементы.

Если вы хотите пойти по пути jQuery (, сначала см. Ниже! ), вам не понадобится .each(), поскольку .prepend() jQuery действует на все элементы в коллекции по умолчанию. 

$(".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 для быстрого ознакомления.

0 голосов
/ 09 июня 2019

Сначала я проверил бы, содержит ли <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())});
...