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

Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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


Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day 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...
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.