将背景颜色应用于每个元素

时间:2015-11-18 11:24:54

标签: jquery html css

我有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)
})

它无法正常工作,我无法找到如何实现这一目标的例子。

2 个答案:

答案 0 :(得分:1)

试试这个

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

答案 1 :(得分:0)

从html中删除分号或在jquery中使用replace。

&#13;
&#13;
$('.color-block ul li a').each(function(){
       var color = $(this).text()
       console.log(color)
       $(this).css('background-color',color)
    })
&#13;
<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>
&#13;
&#13;
&#13;

&#13;
&#13;
$('.color-block ul li a').each(function(){
       var color = $(this).text()
       console.log(color)
       $(this).css('background-color',color.replace(";",""))
    })
&#13;
<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>
&#13;
&#13;
&#13;