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

Question

在我们的电子商务系统和POS系统之间进行了付费集成之后，我的网上商店现在按照字母/时间顺序显示尺寸。 例如。 L | M | S | XL L | M | S | XL代替S | M | L | XL S | M | L | XL S | M | L | XL和

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

这是因为大小属性/选项现在已从POS系统中提取出来，并且对于每种产品都是唯一的（很抱歉，我知道这是集成的工作方式）。 这意味着不可能手动选择它们的显示顺序，因为这将需要成千上万的手动更改，这违背了集成的目的。

我想出了一个jQuery解决方案，但遇到了一些问题。 我已经将其应用于数字和字母大小调整，并且存在相同的问题。

$(".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')"));

在获得具有姐妹值的单个字符值之前，此方法效果很好。 换句话说，该代码可以很好地将LMS重新排列为SML，但是如果存在XS或XL，或者在数字大小减小到个位数的情况下，它将遇到问题。 例如大小为7的7 1 / 4、7 1/8等。这显然是因为.contains（）函数。

我尝试使用.filter（），但是我无法让它选择我想要的元素，更不用说.insertBefore

谢谢。

---

根据要求使用HTML进行编辑：

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

---

编辑2

从上面的HTML以及我刚刚意识到的内容中可以看出-它不是按标签的字母/时间顺序（大小）显示，而是按时间顺序显示单选按钮的值。 如前所述，这是购物车从我们的POS导入产品时动态生成的。

Answer 1

我不确定您需要的功能的用途如何，但是此代码将对您发布的HTML进行排序，并且可以将其传递给其他选择器和其他主要命令：

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

工作演示： http : //jsfiddle.net/jfriend00/B45tJ/

通过简单地定义一个新的序数表，您可以使用它对其他类型的值（如鞋码）进行排序，而无需重写sortLabels函数。

Answer 2

在文件中添加以下jQuery函数：

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

并在您的jquery脚本中尝试使用以下公式：

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

有关更多信息，请参见此JSFiddle链接：

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

Answer 3

您可以使用自定义排序器按数组列表上的大小对列表项进行排序。 这样，如果您需要在页面上添加新的尺寸，只需在sort函数上更新数组即可！

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));
}​

这是工作的小提琴： http : //jsfiddle.net/kayen/rgQr3/2/

Answer 4

有点晚了，但是发现这个问题很有趣
这是我的方法：

jsFiddle演示

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) );
});

• 创建尺寸数组（从较小的数组开始）
• 创建一个排序自定义函数sorty() ，它将对元素.data()排序
• 遍历for循环中每个UL的每个LI --> LABEL元素的文本。
• 如果文本（ trim()空格和toUpperCase()以纠正错误）与数组匹配，则将父li设置为data-size-N ，其中N是返回的数组索引号（ size[i] ）。
• 现在每个LI都有一个数据： data-size="N"我们可以使用我们的函数sorty将排序后的LI附加到UL 。