• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1500
  • Last Modified:

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

0
catonthecouchproductions
Asked:
catonthecouchproductions
  • 4
  • 2
1 Solution
 
DalHorinekCommented:
0
 
catonthecouchproductionsAuthor Commented:
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

0
 
catonthecouchproductionsAuthor Commented:
Would it matter if I am sorting by INT and not alphabetical?
0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
DalHorinekCommented:
Actually now it sorts as strings, i guess.

In the demo, there is:

 a = $(a).text();
 b = $(b).text();
                       
  return (
          isNaN(a) || isNaN(b) ?
             a > b : +a > +b
          )
 
That means, if a or b are not numbers, they are sorted as strings, if they are numbers, then are sorted as numbers, because the +a > +b forces JS to handle them as numbers, but I guess it won't work with negative numbers.

I would do this:

return parseInt($(a).next('.shade-price-wrap').text(),10) > parseInt($(b).next('.shade-price-wrap').text(),10) ? 1 : -1;
    });
0
 
catonthecouchproductionsAuthor Commented:
Thanks! let me try this. Sorry for the delay.

Ryan
0
 
catonthecouchproductionsAuthor Commented:
Good eye! Thank you for that.

Ryan
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now