Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

jQuery - Sort div's on click

Posted on 2010-09-18
6
Medium Priority
?
1,483 Views
Last Modified: 2012-05-10
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
Comment
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
6 Comments
 
LVL 6

Expert Comment

by:DalHorinek
ID: 33711802
0
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 33712262
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
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 33712267
Would it matter if I am sorting by INT and not alphabetical?
0
The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

 
LVL 6

Accepted Solution

by:
DalHorinek earned 2000 total points
ID: 33714542
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
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 33842002
Thanks! let me try this. Sorry for the delay.

Ryan
0
 
LVL 1

Author Closing Comment

by:catonthecouchproductions
ID: 33988876
Good eye! Thank you for that.

Ryan
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

660 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question