javascript - 使用该元素的 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. 没有脚本开始标签。
3. 十六进制颜色代码的位数太多。
4. script 标签需要等到 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>