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).parent().data('color');
});