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

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

<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>

Open in new window

  • 2
1 Solution
here's an idea how.

Create an array with all possible sizes

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?
Some code that works with your lists. You will have to add an attribute to each div with the name key and put in the sortorder for that size as a number with leading zeros - so each key has the same number of characters - as the sort routine relies on alphanumeric sorting...

    <script type="text/javascript">
        function sortIt(divContainer) {
            var e = divContainer.getElementsByTagName('div');
            var myArr = new Array();
            for (var i = 0; i < e.length ; i++) {
                myArr[i] = '<div key="' +  e[i].getAttribute('key') + '" class="termtext">' + e[i].innerHTML + '</div>\n';
            document.getElementById('sizes').innerHTML = myArr.join('');
<div id="sizes">
     add a key attribute which will be used as a alphanumeric sort key. 
     NB! must prefix all numbers with 0 so all keys have the same number of characters,
     if not the sort will not function...
<div key="10" class="termtext"><a href="#">10</a></div>
<div key="12" class="termtext"><a href="#">12</a></div>
<div key="14" class="termtext"><a href="#">14</a></div>
<div key="16" class="termtext"><a href="#">16</a></div>
<div key="06" class="termtext"><a href="#">6</a></div>
<div key="08" class="termtext"><a href="#">8</a></div>
<div key="18" class="termtext"><a href="#">L</a></div>
<div key="10" class="termtext"><a href="#">M</a></div>
<div key="09" class="termtext"><a href="#">S</a></div>
<div key="20" class="termtext"><a href="#">XL</a></div>
<div key="08" class="termtext"><a href="#">XS</a></div>
<button onclick="sortIt(document.getElementById('sizes'))">sort...</button>

Open in new window

By the way the code I gave you works and has been tested in IE, FF, Opera, Chrome and Safari on Windows 7...

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

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