sorting - jQuery & Isotope sort by numbers within an element -

sorting - jQuery & Isotope sort by numbers within an element -

i'm having problem trying figure out how specific type of sorting, sort class id time i'm trying accomplish different.

ok here's illustration code:

<div class="points-wrapper"> <span class="rewards-points"> <span data-bind="text: $data.points">1000</span> points </span> <span class="rewards-points"> <span data-bind="text: $data.points">5000</span> points </span> <span class="rewards-points"> <span data-bind="text: $data.points">5000</span> points </span> </div>

sorting buttons below.

<div id="sorts" class="button-group"> <button class="button is-checked" data-sort-value="original-order">original order</button> <button class="button" data-sort-value="points">500</button> <button class="button" data-sort-value="points">1000</button> <button class="button" data-sort-value="points">2000</button> <button class="button" data-sort-value="points">3000</button> <button class="button" data-sort-value="points">5000</button> </div>

this smaller illustration of i'm working on, real 1 has 30 different items various points count.

i'm trying figure out how sort according points count within span. options along lines of "0 - 1000", "1000 - 5000", "5000 - "10000" etc.

how can sort using jquery , isotope.js?

* sorting *

so assume rewards-points class isotope item, hence:

var container = $('#container').isotope({ itemselector: '.rewards-points', layoutmode: 'masonry', getsortdata: { points: function(item){ homecoming parsefloat($(item).find(".number").text()); } } }); container.isotope({ sortby: 'points' });

the getsortdata function returns value isotope sort by, sortby set name set in getsortdata function.

details here: http://isotope.metafizzy.co/sorting.html

* sorting filtering *

you'll need utilize filter function, so:

$(".button").click(function(e) { if($(this).text() == "all"){ container.isotope({ filter: function() { homecoming true; } }); } else { var btnval = parsefloat($(this).text()); container.isotope({ filter: function() { var itemval = parsefloat($(this).find(".number").text()); homecoming btnval == itemval; }}); } });

see: http://isotope.metafizzy.co/filtering.html

i think should sort it... if can alter markup, utilize data attributes hold values, , classes hold selectors , it'll create working isotope much easier!

update fiddle here: http://jsfiddle.net/y59s2/3/

again, tiding html create easier, consider.

jquery sorting jquery-isotope