title: How do I remove the hyphens in this string (more complex than it sounds!)
body: <p>I must first confess that I understand very little JS and this is a bastardised version of some code I picked up elsewhere. Essentially it runs through a collection of list-items and extracts their class names (which are being populated by a CMS to reflect for example "Brand" or "Manufacturer") builds them into a string, splits the string into arrays and dedupes them. It then creates a list of unique check boxes based on the class name which, when selected or deselected, filters the list-items on the page using jquery.</p>
  
  <p>My problem is, that because the string of class names is being split by a 'space' if the value of the class consists of multiple-words the values populating the class must be hyphenated. </p>
  
  <p>BUT... when the label for the checkbox is generated on the page by the script I wonder if it is possible to remove the hyphen without upsetting the logic generating it.</p>
  
  <p>Here is the code I have so far, if you drop this into an HTML file you will see how it works (the jquery file is hosted elsewhere).</p>
  
  <p>Any help would be highly appreciated!</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt; 
  &lt;html&gt;
  &lt;head&gt;
  
  &lt;script type="text/javascript" src="http://www.chewbz.com/jquery-1.4.3.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt; 
  /**
   * Removes duplicates in the array 'a'
   */
  function unique(a) {
      tmp = new Array(0);
      for(i=0;i&lt;a.length;i++){
          if(!contains(tmp, a[i])){
              tmp.length+=1;
              tmp[tmp.length-1]=a[i];
          }
      }
      return tmp;
  }
  
  /**
   * Returns true if 's' is contained in the array 'a'
   */
  
  function contains(a, e) {
      for(j=0;j&lt;a.length;j++)if(a[j]==e)return true;
      return false;
  }
  
  $(document).ready(function () {
      // create a string of class names, 
      var stringOfClassNames = '';
  
      // grab the class name of each list item to build that string
      $('.filterThis &gt; li').each( function (i) {
          var thisClassString = $(this).attr('class');
          stringOfClassNames = stringOfClassNames +' '+ thisClassString
      });
  
      // Trim spaces from the ends of that string:
      stringOfClassNames = jQuery.trim(stringOfClassNames);
  
      // convert the string to an array.
      var arrayClasses = stringOfClassNames.split(' ');
  
      // pull out only unique values from that array
      arrayUniqueClasses = (unique(arrayClasses));
  
      // we only want to create filters if there are multiple classes
      if (arrayUniqueClasses.length &gt; 1) {
  
          // create box for filters
          $('&lt;div class="filters" id="filters"&gt;&lt;\/div&gt;').insertBefore('.filterThis');
  
          // create the filter checkboxes based on all the class names
          $.each(arrayUniqueClasses, function() {
              $('&lt;div class="filter-options"&gt;&lt;input type="checkbox" checked="checked" value="'+this+'" class="filter-checkbox" id="filterID'+this+'" /&gt;'+this+'&lt;\/div&gt;').appendTo('.filters');
          });
  
          // create a 'show all' checkbox
          $('&lt;div class="filter-options-all"&gt;&lt;input type="checkbox" checked="checked" value="filterAll" class="filter-checkbox" id="filterIDall" /&gt;Show All&lt;\/div&gt;').appendTo('.filters');
  
          // create a close button
          $('&lt;img src="" id="filter-close" onClick="document.getElementById(\'filters\').style.display = \'none\'"&gt;&lt;\/div&gt;').appendTo('.filters');
  
          // the filter part
          $('.filters input').click( function() {
              var value= $(this).val();
              if (value == 'filterAll') {
                  if ($(this).is(':checked')) {
                      $('.filters input').attr('checked','checked');
                      $('.filterThis li').fadeIn();
                  } else {
                      var one=1;
                  }
              } else {
                  stringValue = '.filterThis &gt; li.'+value;
                  if ($(this).is(':checked')) {
                      $(stringValue).fadeIn();
                  } else {
                      $(stringValue).fadeOut();
                      $('.filters #filterIDall').removeAttr('checked');
                  }
              }
          });
      }
  });
  &lt;/script&gt; 
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;style&gt;
  &lt;!-- 
  ul.filterThis {
  list-style-type:none;
  }
  ul.filterThis li {
  width:200px;height:200px;background:#eee;border:solid 1px #ccc;float:left;margin:10px;
  }
  --&gt;
  &lt;/style&gt;
  
  &lt;ul class="filterThis"&gt;
  
      &lt;li class="Medium-Jars"&gt;
          &lt;div class="product-container"&gt;
          Medium Jars
          &lt;/div&gt;
      &lt;/li&gt;
  
      &lt;li class="Large-Jars"&gt;
          &lt;div class="product-container"&gt;
          Large Jars
          &lt;/div&gt;
      &lt;/li&gt;
  
      &lt;li class="Sweets"&gt;
          &lt;div class="product-container"&gt;
          Sweets
          &lt;/div&gt;
      &lt;/li&gt;
  
      &lt;li class="Medium-Jars"&gt;
          &lt;div class="product-container"&gt;
          Medium Jars
          &lt;/div&gt;
      &lt;/li&gt;
  
      &lt;li class="Sweets"&gt;
          &lt;div class="product-container"&gt;
          Sweets
          &lt;/div&gt;
      &lt;/li&gt;
  
  &lt;/ul&gt;
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>