1

特定の値のリスト（配列）に従って、「タイトル」属性で並べ替えたい一連のラベル要素があります。

カラー ホイール上の位置から順に並べ替えようとしていますが、16 進コードの正規表現に基づいて並べ替えを行うと、色の進行がオフになる値がいくつかあるため、機能しません。

「labelTitles」配列の値のリストは、それらを表示したい順序です...しかし、それは私にとってはうまくいきません。

<fieldset class="radio-table">
<legend>Color</legend>
    <label class="color-00C200" title="00C200" for="rad-00C200"> <input type="radio" value="00C200" id="rad-00C200"></label>
    <label class="color-F3F300" title="F3F300" for="rad-F3F300"> <input type="radio" value="F3F300" id="rad-F3F300"></label>
    <label class="color-6C09A2" title="6C09A2" for="rad-6C09A2"> <input type="radio" value="6C09A2" id="rad-6C09A2"></label>
    <label class="color-62D800" title="62D800" for="rad-62D800"> <input type="radio" value="62D800" id="rad-62D800"></label>
    <label class="color-F36E00" title="F36E00" for="rad-F36E00"> <input type="radio" value="F36E00" id="rad-F36E00"></label>
    <label class="color-F3DD00" title="F3DD00" for="rad-F3DD00"> <input type="radio" value="F3DD00" id="rad-F3DD00"></label>
    <label class="color-F3A200" title="F3A200" for="rad-F3A200"> <input type="radio" value="F3A200" id="rad-F3A200"></label>
    <label class="color-C3006E" title="C3006E" for="rad-C3006E"> <input type="radio" value="C3006E" id="rad-C3006E"></label>
    <label class="color-F3C900" title="F3C900" for="rad-F3C900"> <input type="radio" value="F3C900" id="rad-F3C900"></label>
    <label class="color-9E009E" title="9E009E" for="rad-9E009E"> <input type="radio" value="9E009E" id="rad-9E009E"></label>
    <label class="color-4F0EA5" title="4F0EA5" for="rad-4F0EA5"> <input type="radio" value="4F0EA5" id="rad-4F0EA5"></label>
    <label class="color-F3B600" title="F3B600" for="rad-F3B600"> <input type="radio" value="F3B600" id="rad-F3B600"></label>
    <label class="color-F38B00" title="F38B00" for="rad-F38B00"> <input type="radio" value="F38B00" id="rad-F38B00"></label>
    <label class="color-009292" title="009292" for="rad-009292"> <input type="radio" value="009292" id="rad-009292"></label>
    <label class="color-D90042" title="D90042" for="rad-D90042"> <input type="radio" value="D90042" id="rad-D90042"></label>
    <label class="color-C2EB00" title="C2EB00" for="rad-C2EB00"> <input type="radio" value="C2EB00" id="rad-C2EB00"></label>
    <label class="color-F30000" title="F30000" for="rad-F30000"> <input type="radio" value="F30000" id="rad-F30000"></label>
    <label class="color-3613A7" title="3613A7" for="rad-3613A7"> <input type="radio" value="3613A7" id="rad-3613A7"></label>
    <label class="color-00A75F" title="00A75F" for="rad-00A75F"> <input type="radio" value="00A75F" id="rad-00A75F"></label>
    <label class="color-0A5D9C" title="0A5D9C" for="rad-0A5D9C"> <input type="radio" value="0A5D9C" id="rad-0A5D9C"></label>
    <label class="color-97E300" title="97E300" for="rad-97E300"> <input type="radio" value="97E300" id="rad-97E300"></label>
    <label class="color-F34500" title="F34500" for="rad-F34500"> <input type="radio" value="F34500" id="rad-F34500"></label>
    <label class="color-113DA3" title="113DA3" for="rad-113DA3"> <input type="radio" value="113DA3" id="rad-113DA3"></label>
    <label class="color-1A1AAA" title="1A1AAA" for="rad-1A1AAA"> <input type="radio" value="1A1AAA" id="rad-1A1AAA"></label>

これは機能していない私の現在の機能です。

    $(document).ready(function () {
        // Sort the lables by title
        function sortByTitle() {
            var labelTitles = ['F30000', 'F34500', 'F36E00', 'F38B00', 'F3A200', 'F3B600', 'F3C900', 'F3DD00', 'F3F300', 'C2EB00', '97E300', '62D800', '00C200', '00A75F', '009292', '0A5D9C', '113DA3', '1A1AAA', '3613A7', '4F0EA5', '6C09A2', '9E009E', 'C3006E', 'D90042'];
            var fieldsetOfLabels = $('.radio-table');
            var listLabels = fieldsetOfLabels.children('label').get();

            listLabels.sort(function (a, b) {
                var compA = $.inArray($(a).find('label[title]').text(), labelTitles);
                var compB = $.inArray($(b).find('label[title]').text(), labelTitles);
            });
            $(fieldsetOfLabels).append(listItems);
        }
    });

よろしくお願いします。

4

3 に答える 3

0

コードにはいくつかの変更が必要です。

  • 関数を呼び出しsortByTitleます。
  • メソッドを使用しattrてタイトルを取得します (Blazemonger が既に述べたように)
  • ラベルを比較し、ソート コールバックで結果を返します。
  • ではなく、変数を使用してlistLabelsアイテムを追加しますlistItems。

デモ: http://jsfiddle.net/NFp7Z/

$(document).ready(function(){

  function sortByTitle() {
    var labelTitles = ['F30000', 'F34500', 'F36E00', 'F38B00', 'F3A200', 'F3B600', 'F3C900', 'F3DD00', 'F3F300', 'C2EB00', '97E300', '62D800', '00C200', '00A75F', '009292', '0A5D9C', '113DA3', '1A1AAA', '3613A7', '4F0EA5', '6C09A2', '9E009E', 'C3006E', 'D90042'];
    var fieldsetOfLabels = $('.radio-table');
    var listLabels = fieldsetOfLabels.children('label').get();

    listLabels.sort(function(a, b) {
        var compA = $.inArray($(a).attr('title'), labelTitles);
        var compB = $.inArray($(b).attr('title'), labelTitles);
        return compA < compB ? -1 : 1;
    });
    $(fieldsetOfLabels).append(listLabels);
  }

  sortByTitle();

});
于 2012-09-12T19:13:50.493 に答える
0

それ以外の

$(a).find('label[title]').text()

試す

$(a).attr('title')
于 2012-09-12T19:05:45.383 に答える
0

これを試して：

var b= $('.radio-table label');

b.sort(function(a, b)
    {
        if ($(a).prop("title") == $(b).prop("title")) { return 0; }
        if ($(a).prop("title") > $(b).prop("title"))
        {
            return 1;
        }
        else
        {
            return -1;
        }
    });

シンプルに保ちます。

例

于 2012-10-15T12:22:47.653 に答える