Изменение фона элемента li с использованием содержимого html этого элемента

Question

Im довольно уверен, что это возможно, я думаю, что Im на правильном пути, но он все еще не работает для меня; Я имею это как jquery, импортировал последний файл jquery - то, что я хочу для каждого элемента списка цветов, контент, который они содержат, будет использоваться в качестве цвета фона. Если кто-нибудь может мне помочь, поскольку я пробовал десятки часов без успеха, спасибо.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
$("$li.selected-color").each(function(element) { var colorlinkcontent = $(element).html(); $(element).css("background-color", colorlinkcontent); }); 
 
</script> 
 
<ul class="colors"> 
 
    <li class="selected-color">#f334568 
 
    <li class="selected-color">#f334568 
 
     <li class="selected-color">#f334568 
 
     <li class="selected-color">#f334568 
 
</ul> 
 
<hr/> 
 
<span class="title">Selected criteria:</span> 
 

 
<ul class="selected-criteria"> 
 
    <li>yolo 
 
    <li class="selected-color">#f334568 
 
     <li>Website 
 
</ul>

Answer 1

Некоторые вопросы:

1. Нет li закрывающие теги.
2. No script открывающий тег.
3. В шестнадцатеричных цветовых кодах слишком много цифр.
4. Тег сценария должен ждать, пока DOM загрузится или зайдет после элементов списка.
5. Вам необходимо прочитать, как .each() работает как первый аргумент функции обратного вызова - это индекс, а не элемент.
6. Селектор должен быть li.selected-color, а не $li.selected-color.

<ul class="colors"> 
 
    <li class="selected-color">#f33456</li> 
 
    <li class="selected-color">#f33456</li> 
 
    <li class="selected-color">#f33456</li> 
 
    <li class="selected-color">#f33456</li> 
 
</ul> 
 
<hr/> 
 
<span class="title">Selected criteria:</span> 
 

 
<ul class="selected-criteria"> 
 
    <li>yolo</li> 
 
    <li class="selected-color">#f33456</li> 
 
    <li>Website</li> 
 
</ul> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script> 
 
$("li.selected-color").each(function() { 
 
    var $el = $(this); 
 
    $el.css("background-color", $el.text()); 
 
}); 
 
</script>