Question

After a paid integration between our E-Commerce system and POS system, my online store is now showing sizes in Alphabetical/Chronological order.
Eg.
L | M | S | XL instead of S | M | L | XL
And

7 | 7 1/2 | 7 1/4 | 7 1/8 | 7 3/8

This is because the size attributes/options are now being pulled from the POS system and is unique for each product (silly, I know but that’s how the integration works). This means that it’s not possible to manually select the order for them to appear as this will require thousands of manual changes which defeats the purpose of the integration.

I have come up with a jQuery solution but have ran into a few problems.
I have applied this to Numerical and Alphabetical sizing and have the same problem.

$(".Value li:contains('XL')").insertBefore($(".Value li:contains('XXL')"));
$(".Value li:contains('L')").insertBefore($(".Value li:contains('XL')"));
$(".Value li:contains('M')").insertBefore($(".Value li:contains('L')"));
$(".Value li:contains('S')").insertBefore($(".Value li:contains('M')"));
$(".Value li:contains('XS')").insertBefore($(".Value li:contains('S')"));

This works fine until you get to a single character value which has a sister value. In other words that code will rearrange L M S into S M L just fine, but it runs into problems if there is a XS or XL, or in the case of numerical sizes getting down to a single digit. Such as a size 7 if there are 7 1/4, 7 1/8 etc.
This is obviously because of the .contains() function.

I have tried using .filter() but I can’t get it to select the elements I want let alone .insertBefore

Thanks.

---

Edit with HTML as requested:

<div class="Value">
    <ul>
            <li>
    <label><input name="variation[1]" type="radio" class="RadioButton" value="5429"  /> XL</label>
</li>   <li>
    <label><input name="variation[1]" type="radio" class="RadioButton" value="5430"  /> 2XL</label>
</li>   <li>
    <label><input name="variation[1]" type="radio" class="RadioButton" value="5431"  /> M</label>
</li>   <li>
    <label><input name="variation[1]" type="radio" class="RadioButton" value="5432"  /> L</label>
</li>   <li>
    <label><input name="variation[1]" type="radio" class="RadioButton" value="5433"  /> S</label>
</li>
    </ul>
</div>

---

Edit 2

As can be seen from the above HTML and what I’ve just realised – it’s not displaying in Alphabetical / Chronological order of the labels (size), but rather chronologically for the radio buttons value. As mentioned this is generated dynamically by the shopping cart when importing products from our POS.

Answer 1

I’m not sure how general purpose a function you need, but this code will sort the HTML you posted and can be passed other selectors and other key orders:

function sortLabels(ulSelector, order) {
    var parent = $(ulSelector);
    var items = $("li", parent).each(function() {
        // get text out of the label and trim
        var txt = $.trim($(this).find("label").text());
        // get order number
        var num = order[txt] || 0;
        // save this on the DOM object for easier sorting
        this.sortKey = num;
    }).get().sort(function(a, b) {
        // sort DOM array
        return(a.sortKey - b.sortKey);
    });

    // reinsert DOM elements in order
    for (var i = 0; i < items.length; i++) {
        parent.append(items[i]);
    }
}

var sizeOrdinals = {
    "XS": 1, "S": 2, "M": 3, "L": 4, 
    "XL": 5, "XXL": 6, "2XL": 7
};
sortLabels(".Value ul", sizeOrdinals);

Working demo: http://jsfiddle.net/jfriend00/B45tJ/

By simply defining a new table of ordinals, you can use this to sort other types of values like shoe sizes without rewriting the sortLabels function.