SO - 28977844

by Arun P Johny

HTML

<ul>
    <li><a href="#" class="swatchButton" data-color="blk"><span></span>Black</a></li>
    <li><a href="#" class="swatchButton" data-color="red"><span></span>Red</a></li>
    <li><a href="#" class="swatchButton" data-color="blu"><span></span>Blue</a></li>
    <li><a href="#" class="swatchButton" data-color="grn"><span></span>Green</a></li>
    <li><a href="#" class="swatchButton" data-color="yel"><span></span>Yellow</a></li>
</ul>

CSS

span{
display:inline-block;
width:1em;
height:1em;
}

.blk{background:black;}
.red{background:red;}
.blu{background:blue;}
.grn{background:green;}
.yel{background:yellow;}

JavaScript

$('.swatchButton span').addClass(function(){
    return this.parentNode.dataset.color;
});