Применить цвет фона к каждому элементу

Question

У меня есть HTML-код:

<div class="color-block"> 
    <h6 class="elliot-bold">Color</h6> 
    <ul> 
     <li><a href="#!">#ff0142;</a></li> 
     <li><a href="#!">#ff8500;</a></li> 
     <li><a href="#!">#ffde00;</a></li> 
     <li><a href="#!">#96bc05;</a></li> 
     <li style="margin-right: 0px;"><a href="#!">#2cb8db;</a></li> 
    </ul> 
</div> 

И мне нужно, чтобы применить цвет фона в зависимости от

<a href="#!">#96bc05;</a> 

значения динамически. То, что я пытаюсь, чтобы использовать JQuery каждую функцию что-то вроде этого:

$('.color-block ul li a').each(function(){ 
    var color = $(this).html(); 
    $(this).css('background-color', color) 
}) 

Это не работает, и я не могу найти пример того, как реализовать это.

Answer 1

попробовать этот

$(this).css('background-color', color.replace(";","")); 

Answer 2

удалить точку с запятой из HTML или использовать замены в JQuery.

$('.color-block ul li a').each(function(){ 
 
     var color = $(this).text() 
 
     console.log(color) 
 
     $(this).css('background-color',color) 
 
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="color-block"> 
 
    <h6 class="elliot-bold">Color</h6> 
 
    <ul> 
 
     <li><a href="#!">#ff0142</a></li> 
 
     <li><a href="#!">#ff8500</a></li> 
 
     <li><a href="#!">#ffde00</a></li> 
 
     <li><a href="#!">#96bc05</a></li> 
 
     <li style="margin-right: 0px;"><a href="#!">#2cb8db;</a></li> 
 
    </ul> 
 
</div>

$('.color-block ul li a').each(function(){ 
 
     var color = $(this).text() 
 
     console.log(color) 
 
     $(this).css('background-color',color.replace(";","")) 
 
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="color-block"> 
 
    <h6 class="elliot-bold">Color</h6> 
 
    <ul> 
 
     <li><a href="#!">#ff0142;</a></li> 
 
     <li><a href="#!">#ff8500;</a></li> 
 
     <li><a href="#!">#ffde00;</a></li> 
 
     <li><a href="#!">#96bc05;</a></li> 
 
     <li style="margin-right: 0px;"><a href="#!">#2cb8db;</a></li> 
 
    </ul> 
 
</div>