Sort by Category; Element Has Multiple Categories (isotope.js)

Question

I'm trying to make use of isotope.js ( http://isotope.metafizzy.co/sorting.html ) to live-sort a grid of elements. The plugin itself is quite straightforward, but I've encountered a small snag that I can't find any documentation on.

I want to sort the elements by their 'category'. This in and of itself is quite simple, however: the catch is, each element could potentially have multiple categories.

So, for example, the element I'm trying to sort might look like this:

<div class="sortable-element" data-category="category_1">

But what I wanted it to have multiple categories? ie:

<div class="sortable-element" data-category="category_1 category_2 category_3">

Or:

<div class="sortable-element" data-category="category_1, category_2, category_3">

Does anyone know how this could be achieved?

Answer 1

you cant have multiple values in your sort by field. But you can have multiple field, like in this example:

<div class="grid">
  <div class="grid-item" data-color="yellow">
    <p class="number">3</p>
  </div>
  <div class="grid-item" data-color="blue">
    <p class="number">2</p>
  </div>
  ...
</div>

var $grid = $('.grid').isotope({
  getSortData: {
    color: '[data-color]',
    number: '.number parseInt'
  },
  // sort by color then number
  sortBy: [ 'color', 'number' ]
});

See this webpage: http://codepen.io/desandro/pen/sxAJL

Answer 2

okay, I made for your a quick example for understanding:

<section id="options" class="clearfix">
  <ul id="filters" class="option-set clearfix" data-option-key="filter">
    <li><a href="#" data-filter="*">show all</a></li>
    <li><a href="#" data-filter=".Superman">Superman</a></li>
    <li><a href="#" data-filter=".Supergirl">Supergirl</a></li>
    <li><a href="#" data-filter=".Spiderman">Spiderman</a</li>
    <li><a href="#" data-filter=".Batman">Batman</a</li>
  </ul>
</section> <!-- #options -->

<div id="container" class="clearfix">
  <div class="item Spiderman Superman Hulk">
    <p>Comic 1</p>
  </div>
  <div class="item Captain-America Superman Supergirl">
    <p>Comic 2</p>
  </div>
  <div class="item Nightcrawler Sub-Mariner Marv">
    <p>Comic 3</p>
  </div>
  <div class="item Hulk Nightcrawler Batman">
    <p>Comic 4</p>
  </div>
    <div class="item Nightcrawler Hulk Supergirl">
    <p>Comic 5</p>
  </div>
</div>

See http://codepen.io/anon/pen/MyPNQJ