Question

我有一系列标签元素，我想根据特定的值列表（数组）按“title”属性排序。

我试图让它们从它们在色轮上的位置开始排序，并且基于十六进制代码正则表达式进行排序不起作用，因为有一些值通过颜色渐变关闭。

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

提前感谢您的帮助。

Answer 1

而不是

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

试

$(a).attr('title')

Answer 2

代码需要进行一些更改：

调用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();

});

Answer 3

试试这个：

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

保持简单。

Example

根据值列表按标题元素的“标题”属性对标签元素进行排序

3 个答案: