Question

I’m receiving a comma delimited list of items from a database and placing them in a table cell, and I’d like to add alternating styles, so they are easily differentiated from one another.

ie,

foo, bar, mon, key, base, ball

such that the code looks something like this:

<td class="wide">foo, <span class="alt">bar</span>, mon, <span class="alt">key</span>, base, <span class="alt">ball</span></td>

So, I’d like to add a span class to the alternate values.

Is there an easy way to do that in jQuery?

Answer 1

You’re ambiguous as we don’t know if you start with the <span> elements being present or if you only have the comma separated list as plain text, and the <span> elements are added by jQuery.

If you have the <span> elements before the jQuery

Using jQuery, you could use the :even selector.

$('td.wide span:even").addClass("alt");

If you don’t have the <span> elements before the jQuery

(untested)

var list = $('td.wide').html();
var listAsArray = list.split(',');
var newListHtml = '';
for(var i=0; i<listAsArray.length; i++) {
    if(i%2==0) {
        newListHtml += '<span class="alt">';
    }
    newListHtml += listAsArray[i];
    if(i%2==0) {
        newListHtml += '</span>';
    }
}
$('td.wide').html(newListHtml);