Stopping space-delimited function in jquery/javascript

I have this bit of code (i didn't write it) which looks at <li> class names in a html document and then creates a checkbox based on it. e.g <li class="books"></li> - the checkbox would be labelled "books". However if you have a space in the class e.g <li class="book case"></li> it creates two tags - book & case. I don't want it to do this has i want to be able to have a checkbox made up of two words. In the code below it says "now i have a space-delimited string of all class names stored". I don't understand which bit is doing this though. Can anyone see anything obvious that could be changed so this doesn't happen?

var stringOfClassNames = '';

// grab the class name of each list item to build that string
$('.filterThis > li').each( function (i) {
    var thisClassString = $(this).attr('class');
    stringOfClassNames = stringOfClassNames +' '+ thisClassString
});

// now i have a space-delimited string of all class names stored
// in the stringOfClassNames variable.  
// Trim spaces from the ends of that string:
stringOfClassNames = jQuery.trim(stringOfClassNames);

// i can't really do anything with it until it's an array, so
// convert that string to an array.
var arrayClasses = stringOfClassNames.split(' ');


// now for the isolating the filter that is common to all.
// must do before extracting only the unique classes
// one way to approach: count the number of times classes occur, and
// if any occur the same number of times as how many list items i have,
// assume that class is common to all list items, and remove it from
// the filter list. duplicate class on same item = problem, but 
// i'm not thinking about that right now.
// i've also chosen sort the pre-unique'd array
// instead of sorting the unique'd array.  i think i have to for the count.
var arrayClasses = arrayClasses;
totalNumberOfItemsToFilter开发者_运维技巧 = $('.filterThis > li').length;

there is more code if it is needed...

How is Javascript supposed to know that the two css classes book and case should be treated as a single book case word? A space character is not a valid component of a CSS class name, so you can't have it be "This is a single css class book case" in on place, but have it treated as "These are two separate classes book case elsewhere".

Perhaps if you change the class to book_case and then did some string hacking to replace _ with .

Your real problem is this line.

stringOfClassNames = stringOfClassNames +' '+ thisClassString

This creates a string that would look like this:

<li class="one" ></li>
<li class="two three"></li>
stringOfClassNames = 'one two three'

Then this line gets split up by

stringOfClassNames.split(' ');

So what you really need to do is just stuff them in an array in the first function instead.

 //pseudocode since I think you should learn to program this yourself. Pretty basic.
 var arrayClasses
 $('.filterThis > li').each( function (i) {
  //get all the class names for this li
  var thisClassString = $(this).attr('class');
  //stick them into an array
  var splitClasses = thisClassString.split(' ');
  //now add splitClasses to arrayClasses
});

// grab the class name of each list item to build that string
$('.filterThis > li').each( function (i) {
    var thisClassString = $(this).attr('class');

    // replace all spaces in this element's classes 
    // in order to turn multiple classes into one class
    thisClassString.replace(/\s/g, '');

    stringOfClassNames = stringOfClassNames +' '+ thisClassString
});