How to use special characters in filterable portfolio links?

Question

I have a filterable portfolio run by JQuery (based on this Tuts+ article). It uses links to show and hide thumbnails of our work.

HTML:

<div id="filter">
        <ul>
            <li><strong>BROWSE BY TYPE:</strong></li>
            <li class="current"><a href="#">All</a></li>
            <li><a href="#">Advertising</a></li>
            <li><a href="#">Collateral</a></li>
        </ul>
        <ul>
            <li><strong>BROWSE BY INDUSTRY:</strong></li>
            <li class="current"><a href="#">All</a></li>
            <li><a href="#">Automotive</a></li>
            <li><a href="#">Industrial</a></li>
       </ul>
</div>
<ul id="portfolio">
        <li class="advertising automotive"><a href="#"><img src="img/portfolio/thumbs/img1.jpg"></a></li>
        <li class="advertising restaurant"><a href="#"><img src="img/portfolio/thumbs/img2.jpg"></a></li>
        <li class="advertising industrial b2b"><a href="#"><img src="img/portfolio/thumbs/img3.jpg"></a></li>
</ul>

jQuery:

$(document).ready(function() {
   $('#filter a').click(function() {
   $(this).css('outline','none');
   $('#filter .current').removeClass('current');
   $(this).parent().addClass('current');

   var filterVal = $(this).text().toLowerCase().replace(' ','-');

   if(filterVal == 'all') {
     $('ul#portfolio li.hidden').fadeIn('slow').removeClass('hidden');
   } else {
     $('ul#portfolio li').each(function() {
       if(!$(this).hasClass(filterVal)) {
         $(this).fadeOut('normal').addClass('hidden');
       } else {
         $(this).fadeIn('slow').removeClass('hidden');
       }
     });
   }

   return false;
  });
});

The problem is this: I cannot use special characters in the links. I would like 'Industrial' to be 'Industrial & Manufacturing' but it does not work. Even if I change the class of that thumbnail <li> to class="industrial-&-manufacturing" it doesn't work. I've also tried class="industrial-&-manufacturing" and that does not work either. I also tried using a slash (Industrial / Manufacturing) and that did not work.

How can I use special characters in this script and have it still work?

Answer 1

You can use this instead:

var filterVal = $(this).text().toLowerCase().split(' ').join('-');

As another option, consider using data attributes. For example:

<ul>
  <li><strong>BROWSE BY INDUSTRY:</strong></li>
  <li class="current"><a href="#" data-filter="all">All</a></li>
  <li><a href="#" data-filter="automotive">Automotive</a></li>
  <li><a href="#" data-filter="industrial">Industrial</a></li>
</ul>

Then your filter display names can differ from the class names.

As a side note, there is a closing ul tag missing.