1

当社の E コマース システムと POS システムを有料で統合した後、私のオンライン ストアはアルファベット順/年代順にサイズを表示するようになりました。例えば。 AndL | 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 がある場合、または数値サイズが 1 桁になる場合に問題が発生します。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

少し遅れましたが、この質問
は興味深いものでした。これが私がそれを行う方法です：

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()間違いを修正するため）が配列と一致する場合-親liをadata-size-Nに設定します。ここで、Nは返された配列インデックス番号（size[i]）です。
  • それぞれLIに次のようなデータがありdata-size="N"ます。関数を使用して、並べ替えられたLIsortyに追加できます。UL
于 2012-04-20T09:43:01.630 に答える
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 に答える