Databases
StackOverflow2013
Postsdbo
POFilter list items by class using jQuery
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POFilter list items by class using jQuery
    text
    copied!<p>I am modifying an existing website's A-Z directory, it is a filtered list using jQuery. Clicking on <strong>ALL</strong> shows all departments. Each section A-Z are grouped inside their own div with a matching class, for example all departments starting with <strong>A</strong> have a div with a class "A". </p> <p>I need to filter out an additional group of items in the list in the same manner, when clicking on <strong>GILROY</strong>. I have added the class "gilroy" to these list items. </p> <p>After spending several hours trying to decipher similar examples using filtering I realize I just don't understand how to properly code it, and it is a time sensitive project. Any assistance or pointing in the right direction would be greatly appreciated. </p> <p>The existing code that I am modifying is below, see jsfiddle link for css &amp; html.</p> <pre><code>$(document).ready(function() { $('ul#letterlist a').click(function() { $(this).css('outline','none'); $('ul#letterlist .current').removeClass('current'); $(this).parent().addClass('current'); var filterVal = $(this).text().toUpperCase().replace(' ','-'); if(filterVal == 'ALL') { $('div#departments div').addClass('column'); $('div#departments div div.hidden').fadeIn('fast').removeClass('hidden'); } else { $('div#departments div.column').fadeIn('fast').removeClass('column'); $('div#departments div div').each(function() { if(!$(this).hasClass(filterVal)) { $(this).fadeOut('fast').addClass('hidden'); } else { $(this).fadeIn('fast').removeClass('hidden'); } }); } return false; }); }); </code></pre> <p><a href="http://jsfiddle.net/kaemak/RSpP9/1/" rel="nofollow">jsfiddle</a></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload