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