2011-07-06 56 views
8

我的問題與我在堆棧溢出中找到的其他許多其他問題非常相似,但不完全相同。如何使用jQuery中的自定義排序順序對列表項進行排序

我想基於每個項目中包含的跨度內容對列表項進行排序 - 但使用我可以定義的排序順序。下面是一個樣本列表項的HTML:

<li> 
    <span class="fname">John</span> 
    <span class="lname">Doe</span> 
    <span class="year">Sophomore</span> 
</li> 

我想基於「年」跨度的內容進行排序,按時間順序而不是按字母順序排列。訂單,顯然需要有:

  • 大一
  • 大二
  • 少年
  • 高級

我怎麼能做到這一點?

僅供參考,我使用下面的jQuery代碼(這完美的作品),以姓氏的字母順序進行排序:

function sortByLastName(){ 
    var myList = $('#foo ul'); 
    var listItems = myList.children('li').get(); 
    listItems.sort(function(a,b){ 
     var compA = $(a).find('.lname').text().toUpperCase(); 
     var compB = $(b).find('.lname').text().toUpperCase(); 
     return (compA < compB) ? -1 : (compA > compB) ? 1 : 0; 
    }); 
    $(myList).append(listItems); 
}; 
+0

提供您的代碼,請 –

回答

9

以匹配您sortByLastName()函數,這會工作:

function sortByYear(){ 
    var myYears = ['Freshman', 'Sophomore', 'Junior', 'Senior']; 
    var myList = $('#foo ul'); 
    var listItems = myList.children('li').get(); 
    listItems.sort(function(a,b){ 
    var compA = $.inArray($(a).find('.year').text(), myYears); 
    var compB = $.inArray($(b).find('.year').text(), myYears); 
    return (compA < compB) ? -1 : (compA > compB) ? 1 : 0; 
    }); 
    $(myList).append(listItems); 
} 

只需使用$.inArray()找到陣列中的每個學年的指標。請注意,對於數組中未找到的值,這將返回-1,這會將這些元素置於列表頂部。

+0

這完美地工作。謝謝! –

6

一個簡單的方法是創建與您的預期值的數組。

var years=['Freshman', 'Sophomore', 'Junior', 'Senior' ]; 

然後,當您對元素進行排序時,比較索引。

listItems.sort(function(a,b){ 
    var indexA = $.inArray( $(a).find('.year').text(), years); 
    var indexB = $.inArray($(b).find('.year').text(), years); 
    return (indexA < indexB) ? -1 : (indexA > indexB) ? 1 : 0; 
}); 
1

你必須改變你的排序標準回調。就像這樣:

function sortByLastName(){ 
    var myList = $('#foo ul'); 
    var listItems = myList.children('li').get(); 
    var scores = { 
     "FRESHMAN": 0, "SOPHOMORE": 1, "JUNIOR": 2, "SENIOR": 3 
    }; 
    listItems.sort(function(a,b){ 
     var compA = $(a).find('.lname').text().toUpperCase(); 
     var compB = $(b).find('.lname').text().toUpperCase(); 
     compA = scores[compA]; compB = scores[compB]; //Sort by scores instead of values 
     return (compA < compB) ? -1 : (compA > compB) ? 1 : 0; 
    }); 
    $(myList).append(listItems); 
}; 

希望這有助於

相關問題