使用该元素的html内容更改li元素的背景

Question

我很确定这是可能的，我认为我在正确的轨道上，但它仍然不适合我; 我有这个作为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. 否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>