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

Change the background of li element using the html content of that element

本文关键字：元素 背景 li html 使用      更新时间：2023-09-26

我很确定这是可能的，我认为我走在了正确的轨道上，但这对我来说仍然不起作用；我有这个作为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>

一些问题：

  1. 没有li结束标记
  2. 没有script打开标签
  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>

相关文章：