title: Defined sort order with Isotope
body: <p>I am using isotope to sort and filter a number of tiles relating to features for different products. Some of the tiles are unique to each product, while others are shared. When you switch between products, it filters the tiles to show only those tiles tagged with the appropriate class names, however, I want to control the order of these tiles as the features have a different priority for each product. If I don't implement any way of controlling the order, they appear in the order that they are within the markup, which means that the first product's features are going to be the first tiles for subsequent products in the markup.</p>
  
  <p>I am trying to figure out the most efficient way to do this. Right now I have added attribute's as such:</p>
  
  <p><strong>Tiles</strong></p>
  
  <pre><code>&lt;div id="feature1" class="isotope-item productA productB" productAOrder="1" productBOrder="2"&gt;
  Feature 1
  &lt;/div&gt;
  
  &lt;div id="feature2" class="isotope-item productA productB" productAOrder="2" productBOrder="1"&gt;
  Feature 2
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>jQuery/Isotope code</strong></p>
  
  <pre><code>$container.isotope({
      getSortData: {
          productA: function ($elem) {
              return parseInt($elem.hasClass('productA').attr('productAOrder').text(), 10);
          },
          productB: function ($elem) {
              return parseInt($elem.hasClass('productB').attr('ProductBOrder').text(), 10);
          }
      }
  });
  
  
  $container.isotope({ filter: '.productA'});
  $container.isotope({ sortBy: 'productA', sortAscending : true});
  </code></pre>
  
  <p>For whatever reason, I can't get the tiles to follow the order I have defined. Is there a better way to do this?</p>