jQuery-包含/过滤器和insertBefore以重新排列列表（div> ul> li）问题

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 L | M | S | XL instead of S | M | L | XL S | M | L | XL 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 LMS into SML 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.

Answer 2

Add this jQuery function in your file:

(function($) {
    $.fn.whichContains = function(content) {
        return this.filter(function() {
                return $(this).text().trim() == content;
        });
    };
}(jQuery));

and in your jquery script try with this formula:

$(".Value li").whichContains('XL').insertBefore($(".Value li").whichContains('2XL'));

For more Info, see this JSFiddle Link:

http://jsfiddle.net/UcbU2/1/

Answer 3

You could use a custom sorter to sort the list items by sizes on an Array List. This way, if you need to add new sizes to your page, just update the array on the sort function!

var sortSizes = [],
allLi = $("div.Value li"),
newLi = "";

// Pushing list items onto the sort Array with its size
allLi.each(function() {
    sortSizes.push(new Array($.trim($(this).text()), $('<div>').append($(this).clone()).remove().html()));
});
// Sort by index of its size in the size array below
sortSizes = sortSizes.sort(sizes);
// Get the new list of sorted LIs
for (i = 0, l = sortSizes.length; i < l; i++) {
    newLi += sortSizes[i][1];
}
// Add this sorted LI to the UL
$("div.Value ul").html(newLi);
// Size sorter
function sizes(a, b) {
    var size = ["S", "M", "L", "XL", "XXL", "XXXL"],
        a = $.inArray(a[0], size),
        b = $.inArray(b[0], size);
    return ((a < b) ? -1 : ((a > b) ? 1 : 0));
}​

Here's the working fiddle: http://jsfiddle.net/kayen/rgQr3/2/

Answer 4

A bit late but found this question interesting
Here is how I would do it:

jsFiddle demo

var size = ['XS','S','M','L','XL','XXL', '2XL'];
function sorty(a,b){
    var AA = $(a).data('size'),
        BB = $(b).data('size');
    return (AA<BB) ? -1 : (AA>BB) ? 1 : 0;
}
$('div.Value ul').each(function(ix, UL){  
    $('li', UL).each(function(ix, LI){
      for(i=0;i<size.length;i++){
        if( $.trim($(LI).find('label').text().toUpperCase()) === size[i]){
            $(LI).data('size', i);
        }
      }
    });
    $(UL).append( $('li',UL).sort(sorty) );
});

• Create an array of sizes (from smaller)
• Create a sort custom function sorty() that will sort elements .data()
• Iterate trough the texts of each LI --> LABEL elements for each UL inside a for loop.
• If the text ( trim() whitespaces and toUpperCase() to fix mistakes) matches an array - set the parent li a data-size-N , where N is the returned array index number ( size[i] ).
• Now that each LI has a data like: data-size="N" we can use our function sorty to append to UL the sorted LI's.