isotope filter using value on divs with data-*
<p>Im trying to filter divs by data attribute rather than class using isotope... im not sure how isotope works and there appears to be nothing in the documentation that references filtering data attributes and not just classes?!</p>

<p>Im sure i will slap my self with the answer...</p>

<p>but this is as far as I have got:</p>

<pre><code>var $grid = $('.isotope').isotope({
itemSelector: '.isotope-item'
});

$('#item-filter-select').on('change', function () {
  var el = this.value;
  $grid.isotope({ filter: el });  
});

&lt;div id="filters"&gt;

    &lt;h4&gt;Geschenkideen&lt;/h4&gt;
      &lt;select id="item-filter-select"&gt;
        &lt;option value="*" &gt;Show All&lt;/option&gt;
        &lt;option value="clothes" &gt;Clothing&lt;/option&gt;
        &lt;option value="jewelry" &gt;Jewelry&lt;/option&gt;
        &lt;option value="misc" &gt;Miscellaneous&lt;/option&gt;
      &lt;/select&gt;

&lt;/div&gt;

&lt;div class="isotope"&gt;

  &lt;div class="isotope-item" data-price="23" data-type="misc"&gt;
    &lt;img src="http://unit60.com/vendo/img/shop/1.jpg" /&gt;23
  &lt;/div&gt;

   &lt;div class="isotope-item" data-price="400" data-type="misc"&gt;
    &lt;img src="http://unit60.com/vendo/img/shop/2.jpg" /&gt;400
  &lt;/div&gt;

   &lt;div class="isotope-item" data-price="12" data-type="jewelry"&gt;
    &lt;img src="http://unit60.com/vendo/img/shop/3.jpg" /&gt;12
  &lt;/div&gt;

   &lt;div class="isotope-item clothes" data-price="8" data-type="clothes"&gt;
    &lt;img src="http://unit60.com/vendo/img/shop/4.jpg" /&gt;8
  &lt;/div&gt;

   &lt;div class="isotope-item" data-price="144" data-type="misc"&gt;
    &lt;img src="http://unit60.com/vendo/img/shop/5.jpg" /&gt;144
  &lt;/div&gt;

   &lt;div class="isotope-item" data-price="70" data-type="misc"&gt;
    &lt;img src="http://unit60.com/vendo/img/shop/6.jpg" /&gt;70
  &lt;/div&gt;

   &lt;div class="isotope-item" data-price="445" data-type="jewlery"&gt;
    &lt;img src="http://unit60.com/vendo/img/shop/3.jpg" /&gt;445
  &lt;/div&gt;

   &lt;div class="isotope-item" data-price="64" data-type="misc"&gt;
    &lt;img src="http://unit60.com/vendo/img/shop/2.jpg" /&gt;64
  &lt;/div&gt;

   &lt;div class="isotope-item" data-price="21" data-type="misc"&gt;
    &lt;img src="http://unit60.com/vendo/img/shop/5.jpg" /&gt;21
  &lt;/div&gt;

   &lt;div class="isotope-item" data-price="82.50" data-type="misc"&gt;
    &lt;img src="http://unit60.com/vendo/img/shop/1.jpg" /&gt;82.50
  &lt;/div&gt;

   &lt;div class="isotope-item" data-price="25" data-type="jewelry"&gt;
    &lt;img src="http://unit60.com/vendo/img/shop/3.jpg" /&gt;25
  &lt;/div&gt;

   &lt;div class="isotope-item" data-price="100" data-type="misc"&gt;
    &lt;img src="http://unit60.com/vendo/img/shop/6.jpg" /&gt;100
  &lt;/div&gt;

   &lt;div class="isotope-item" data-price="30" data-type="misc"&gt;
    &lt;img src="http://unit60.com/vendo/img/shop/2.jpg" /&gt;30
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>codepen:
<a href="http://codepen.io/unit60/pen/vXyAzj" rel="nofollow">http://codepen.io/unit60/pen/vXyAzj</a></p>

<p>HELLLLP!!! :)</p>