Multiple filters doesn't work well

[metafizzy]

Multiple filters doesn't work well

[desandro]

Do you have a live URL I can look at? If its a confidential project try re-creating the basic functionality in http://jsFiddle.net

[subbu]

I don't have a live url, but here is all the relevant code. Everything else is from the demo code:

• show all


• India


• Australia

  <ul id="playing-roles" class="option-set floated clearfix">
    <li><a href="#type" data-filter="*" class="selected">Everyone</a></li>
    <li><a href="#batsman" data-filter=".batsman">Batsman</a></li>
    <li><a href="#bowler" data-filter=".bowler">Bowler</a></li>
  </ul>

<li class="in keeper" data-role="feature" data-related="keeper" data-avg='49'><span>Dhoni</span></li>
<li class="in batsman" data-category="feature" data-related="batsman" data-avg='44'><span>Gambhir</span></li>
<li class="in allrounder" data-category="feature" data-related="allrounder" data-avg='35'><span>Sehwag</span></li>
<li class="in batsman" data-category="feature" data-related="batsman" data-avg='45'><span>Sachin</span></li>
<li class="in allrounder" data-category="feature" data-related="allrounder" data-avg='33'><span>Yusuf</span></li>
<li class="in bowler" data-category="feature" data-related="bowler" data-avg='9'><span>Zaheer</span></li>
<li class="in bowler" data-category="feature" data-related="bowler" data-avg='14'><span>Harbhajan</span></li>
<li class="in bowler" data-category="feature" data-related="bowler" data-avg='3'><span>Munaf</span></li>

<li class="au batsman" data-category="doc" data-related="batsman" data-avg='43'><span>Ponting</span></li>

<li class="sa batsman" data-category="demo" data-related="batsman" data-avg='42'><span>Graeme Smith</span></li>

<script> ``` $list = $('#super-list'); $('#countries, #playing-roles').find('a').click(function(){ var filterName = $(this).attr('data-filter'); $list.isotope({ filter : filterName }); return false; }); ``` </script>

[desandro]

It all depends out how you are putting together the filter for Isotope to use. In the filtering demo, I just use buttons, so each filter gets replaced by the next. In your case, you would want to build some more logic into how the interaction works so that the filters can be used together.

For example, if you want to filter for .au AND .batsman, the appropriate filter would be .au.batsman, but if you want to filter .au OR .batsman, your filter would be .au, .batsman.

[jdbo]

It would be very helpful to add an intersection (or "AND") example to the filtering docs or demos (to supplement the existing union example "alakali and alkaline earth" example) - those just becoming familiar with jQuery selectors (such as myself) might not have figured out that intersections were available (let alone what syntax to use) based on the existing docs/demo.

Thanks for putting together this wonderful library!