1

在我们的电子商务系统和 POS 系统之间进行了付费集成后，我的在线商店现在按字母/时间顺序显示尺寸。例如。 L | M | S | 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 1/4、7 1/8 等，则为 7。这显然是因为 .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 导入产品时由购物车动态生成的。

4

4 回答 4

4

我不确定你需要一个通用的函数，但是这段代码会对你发布的 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 函数。

于 2012-04-20T06:37:06.423 回答
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/

于 2012-04-20T06:39:02.410 回答
0

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

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/

于 2012-04-20T07:02:40.417 回答
0

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

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()
  • 遍历循环内每个LI --> LABEL元素的文本。ULfor
  • 如果文本（trim()空格和toUpperCase()修复错误）匹配一个数组 - 设置父lia data-size-N，其中 N 是返回的数组索引号（size[i]）。
  • 现在每个LI都有一个类似的数据：data-size="N"我们可以使用我们的函数sorty附加到UL排序的 LI。
于 2012-04-20T09:43:01.630 回答