使用該元素的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>