根據值列表按其「標題」屬性對一系列標籤元素進行排序

我有一系列標籤元素，我想根據特定的值列表（數組）排序其「標題」屬性。根據值列表按其「標題」屬性對一系列標籤元素進行排序

我想讓它們從它們在色輪上的位置開始排序，並且基於十六進制代碼正則表達式進行排序不起作用，因爲有一些通過顏色漸進關閉的值。

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

在此先感謝您的幫助。

來源

2012-09-12 thedigitalman

代碼需要一些變化：

調用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-12 19:13:50 Guffa

此代碼的工作，但複製每個標籤，當我在我的項目實施。我將顏色添加到您創建的小提琴中：[link] http://jsfiddle.net/NFp7Z/2/ – thedigitalman

使用.NET Razor語法通過循環動態生成標籤和單選按鈕。這是標籤翻一番的原因嗎？ – thedigitalman

@thedigitalman：很難說爲什麼標籤會在沒有看到代碼的情況下被複制。如果生成的HTML代碼看起來像這個例子，那麼它是如何創建的並不重要。當它到達瀏覽器時，靜態內容和服務器上動態創建的內容沒有區別。 – Guffa

而不是

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

嘗試

$(a).attr('title')

來源

2012-09-12 19:05:45 Blazemonger

試試這個：

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

來源

2012-10-15 12:22:47

根據值列表按其「標題」屬性對一系列標籤元素進行排序

回答

相關問題