Link to home
Start Free TrialLog in
Avatar of bamford_sup
bamford_sup

asked on

Custom javascript sort (sorting clothing sizes - XXS XS S M L XL XXL

I need a way to sort clothing sizes using a javascript function. I have a <div> who's contents is a list of child <div>s and <a href>s currently sorted alphabetically (attached). Notice how the 6 and 8 are out of order in the 'numbers' and the 'letters' need to ordered XS S M L XL.

I need to be able to sort and replace the contents of the <div id="sizes">  so the sizes are listed in size order -- numbers first in numerical order followed by the 'letters' in size order XS S M L, etc, etc.

To complicate things further, the numbers are all standardised, but there are many different letter variations that could be used on the live site. So for one clothing category the sizes may be XS S M L XL, but for another they may be XXS XSm Small S/M M M/L L XL -- basically non-standardised and each category does not use the same letters to describe the sizes available -- If it helps I can supply a list of all the possible 'letter' sizing variations that are on the site.

The site uses jQuery so feel free to use this in the solution.

I'm completely stumped on this as my Javascript knowledge doesn't stretch to solving a problem like this!

Hope someone can help!

Many thanks
Joe

<div id="sizes">
<div class="termtext"><a href="#">10</a></div>
<div class="termtext"><a href="#">12</a></div>
<div class="termtext"><a href="#">14</a></div>
<div class="termtext"><a href="#">16</a></div>
<div class="termtext"><a href="#">6</a></div>
<div class="termtext"><a href="#">8</a></div>
<div class="termtext"><a href="#">L</a></div>
<div class="termtext"><a href="#">M</a></div>
<div class="termtext"><a href="#">S</a></div>
<div class="termtext"><a href="#">XL</a></div>
<div class="termtext"><a href="#">XS</a></div>
</div>

Open in new window

Avatar of Michael701
Michael701
Flag of United States of America image

here's an idea how.

Create an array with all possible sizes
sizes[0]="Unknown"
sizes[1]="XXS"
sizes[2]="XS"
sizes[3]="S"
sizes[4]="SMALL"
sizes[5]="S/M"
sizes[6]="M"
sizes[7]="MEDIUM"
...

then write function that returns the index number, return 0 if not found. Use this number to sort the data.

sizes.length will be the number of elements in the array

convert your request to uppercase before scanning the array
var casechanged=sometext.toUpperCase();

Does this get you pointed in the right direction?
ASKER CERTIFIED SOLUTION
Avatar of yogi4life
yogi4life
Flag of Norway 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
By the way the code I gave you works and has been tested in IE, FF, Opera, Chrome and Safari on Windows 7...