Link to home
Start Free TrialLog in
Avatar of catonthecouchproductions
catonthecouchproductionsFlag for United States of America

asked on

jQuery - Sort div's on click

I am trying to make the boxes on this page sort: http://dws.commercegeneration.com:85/Shades.aspx

I think I almost have it, but I have it appending to each section. What other ways can I sort the divs by the price.

Right now I have only the "sort from low to high" - that is the only working link.

I think the code I have is a start.

Thanks,

Ryan


$(function () {
function reorder(sortby, direction){
    Array.prototype.sort.call($("div.shade-box"), function(a,b){
        var av = $(a).find("span."+sortby).text();
        var bv = $(b).find("span."+sortby).text();
        return direction=="ascending"? av-bv : bv-av;
    }).appendTo(".shade-listing");
}
	$('.sort-low-high').toggle(function() {
		reorder("shade-price-wrap","ascending");
/*
		$(this).html("Close box");
*/
	}, function() {
		reorder("shade-price-wrap","descending");
/*
		$(this).html(saveText);
*/
	});
});

Open in new window

Avatar of DalHorinek
DalHorinek
Flag of Czechia image

Avatar of catonthecouchproductions

ASKER

Hey,

I am now working with the code below in the box. I made some changes to the code seen in the demo, on the click event:

http://qd9.co.uk/projects/jQuery-Plugins/sort/demo.html

My markup looks like this: http://pastie.org/1168658

I made it look for the <span> that holds the price and sort by that. Any suggestions?
var sortDiv = jQuery('.shade-box'),
    inverse = false;

$('.sort-low-high').click(function(){
    sortDiv.sort(function(a, b){
    	console.log(a);
        return $(a).next('.shade-price-wrap').text() > $(b).next('.shade-price-wrap').text() ? 1 : -1;
    });
});

Open in new window

Would it matter if I am sorting by INT and not alphabetical?
ASKER CERTIFIED SOLUTION
Avatar of DalHorinek
DalHorinek
Flag of Czechia image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thanks! let me try this. Sorry for the delay.

Ryan
Good eye! Thank you for that.

Ryan