Adding <span> to alternating comma delimited list in Jquery

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

If you're getting it from the database, you probably want to do this on the server side, and add those elements in your HTML; not with jQuery.

However, why use <span> elements? The keyword in your title and your question I've seen is list - yet there is no use of (my favorite HTML elements!) <ul> or <ol>.

What server-side language are you using? I'll assume PHP... when you read the comma separated list out of the DB, turn it into a list, and then use CSS to add commas. You can do that with a background-image of a comma, or with a CSS pseudo-element and the content property.

Example

In a PHP server-side script:

<?php
    $readFromTheDB = "foo, bar, mon, key, base, ball";
    $list = $keywordsArray = array_map('trim', explode(',', $readFromTheDB));
    echo "<ul>";
    $oddEven = true;
    foreach($list as $listitem) {
        $class = ($oddEven?"odd":"even");
        echo "<li class=\"".htmlentities($class)."\">".htmlentities($listitem)."</li>";
        $oddEven = !$oddEven;
    }
    echo "<ul>";
?>

Then in your CSS file:

ul li {
    background:url(path/to/images/comma.png) BOTTOM RIGHT NO-REPEAT;
    display:inline;
}
ul li.even {
    font-weight:bolder;
}

Answer 2

jQuery:

$('td.wide').find('span.alt').addClass('highlight');

where highlight should be defined as css class.

Answer 3

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);

Answer 4

I would make the list into a ul, and then use the :nth-child selector to style each even li.

No, it wont work in every browser, but it is a far neater way than using span tags and javascript, and seeing as it is merely a minor visual aide (no meaning will be lost if the style is not displayed) it is less critical for it to work in older browsers.

For more info on :nth-child, see:
http://www.w3.org/TR/css3-selectors/#nth-child-pseudo
http://www.w3.org/Style/Examples/007/evenodd

Answer 5

function spanize(commaDelimitedString){
   var items = commaDelimitedString.split(',');
   var result = [];
   $.each(items, function(i){
       if(i%2 != 0)
           result.push('<span class="alt">' + this + '</span>');
       else
           result.push(this);
   });
   return result.join(',');
}

Nothing awesome, but works.

Answer 6

I believe you're looking for something like this:

jQuery

<script type="text/javascript">
  $(document).ready(function() {
    var data='foo, bar, mon, key, base, ball';

    // Add SPANs to all text parts
    $('#insertdata').html('<span>'+data.split(", ").join("</span>, <span>")+'</span>');

    // Add the highlighting to the odd spans
    $('#insertdata span:odd').addClass('alt');

    // Remove SPANs that are not needed
    $('#insertdata span:even').each(function() {
      $(this).replaceWith($(this).text());
    });
  });
</script>

CSS

<style type="text/css">
  .alt {
    font-weight: bold;
  }
</style>

HTML

<table>
  <tr><td id="insertdata"></td></tr>
</table>