Question

Let’s say we have the following html:

 <ul id="portfolio-list" class="clearfix span-24">

  <li class="2012#foo bar car#cat_1">item 1 <br /></li>
  <li class="2011#car foo fly#cat1">item2 <br /></li>
  <li class="2009#car fly swat_car#cat_2">item3<br /></li>
  <li class="2012#bar show car#cat_3">item 4<br /></li>

</ul>

and I want to create a map the classes each item to do the following:

1. I’m trying to split the code into three parts
2. output each piece and
3. add them to their own array of values.

Using the following code, it only returns the value from the last list item.

How do I get it to iterate over ALL the list items and add the values for each list item.

code follows:

jQuery(document).ready(function($) {
    var splitList = $("#portfolio-list li").map(function() {
        inStringy = $(this).attr("class").split('#');
        list = $(this).attr('class');
        list = list.split("#").join(" ");
        $(this).removeClass();
        var that = $(this);
        $(that).addClass(list);
        return inStringy;
    });

    cla = [];
    yr = inStringy[0]; 
    classListin[classListin.length] = cla + "";
    categoryListin[categoryListin.length] = cat + " ";
    cla = inStringy[1];
    cla = cla.split(" ");
    cat = inStringy[2];
    yearListin = [];
    classListin = [];
    categoryListin = [];
    yearListin[yearListin.length] = yr + "";
    classListin[classListin.length] = cla + "";
    categoryListin[categoryListin.length] = cat + " ";
});

Any help would be appreciated!!!

Answer 1

Globals all over the place!
See comments for explanations.

// answer moved to fiddle:
http://jsfiddle.net/VyFc8/