使用jQuery按字母順序對列表中的列進行排序？

Question

在這里，我有一個顯示兩列code和name的無序列表。我使用javascript對列表進行排序。但是它正在對整個列表進行排序。我需要根據代碼和名稱對列表進行排序，這意味着會有兩個按鈕按鈕用於根據代碼對列表進行排序，另一個按鈕用於根據名稱對列表進行排序。這是我的代碼

function sortUnorderedList(ul, sortDescending) {
  if(typeof ul == "string")
    ul = document.getElementById(ul);

 // Get the list items and setup an array for sorting
  var lis = ul.getElementsByTagName("LI");
  var vals = [];

  // Populate the array
  for(var i = 0, l = lis.length; i < l; i++)
    vals.push(lis[i].innerHTML);

  // Sort it
  vals.sort();

  // Sometimes you gotta DESC
  if(sortDescending)
    vals.reverse();

  // Change the list on the page
  for(var i = 0, l = lis.length; i < l; i++)
    lis[i].innerHTML = vals[i];
}

和

 window.onload = function () {
         var desc = false;
         document.getElementById("stCodeDSC").onclick = function () {
             sortUnorderedList("list3", desc);
             desc = !desc;
             return false;
         }
     }

和

<div id="l1" style="width: 100%; height: 171px; overflow: auto; ">
<asp:ListView ID="ListView1" runat="server" ViewStateMode="Disabled">
<LayoutTemplate>
<ul id="list3" class="conn" style="width: 90%; height: 171px;">
<asp:PlaceHolder runat="server" ID="itemPlaceholder"></asp:PlaceHolder>
</ul>
</LayoutTemplate>
<ItemTemplate>
<li class="add" onclick="hilite()" id ="l3"  >
 <table style="width: 100%;">
<tr  style="width: 100%;">
<td class="border2" style="width: 50%;">
<%# Eval("code") %>
</td>
<td class="border2" style="width: 50%;">
<%# Eval("Name") %>
</td>
</tr>
</table>
</li>
</ItemTemplate>
</asp:ListView>
</div>

有什么建議嗎？

編輯：

  function sortUnorderedList(ul, sortDescending, sortClass) {
         if (typeof ul == "string") {
             ul = document.getElementById(ul);
         }
         var lis = ul.getElementsByTagName("LI");
         var vals = [];
         for (var i = 0, l = lis.length; i < l; i++) {
             vals.push({
                 sortFieldVal: lis[i].getElementsByClassName(sortClass)[0].innerText,
                 val: lis[i].innerHTML
             });
         }

         vals.sort(function (a, b) {
             var nameA = a.sortFieldVal.toLowerCase(), nameB = b.sortFieldVal.toLowerCase()
             if (nameA < nameB) //sort string ascending
                 return -1
             if (nameA > nameB)
                 return 1
             return 0 //default return value (no sorting)
         });

         if (sortDescending) vals.reverse();

         for (var i = 0, l = lis.length; i < l; i++)
             lis[i].innerHTML = vals[i].val;
     }

     window.onload = function () {
         var desc = false;
         document.getElementById("stCodeDSC").onclick = function () {
             sortUnorderedList("list3", desc, "code");
             desc = !desc;
             return false;
         }

         document.getElementById("stNameDSC").onclick = function () {
             sortUnorderedList("list3", desc, "name");
             desc = !desc;
             return false;
         }
     }

和

 <img src="../Images/Sort_down.png" width="8" height="18" id="stCodeDSC">
<img src="../Images/sort_up.png" width="8" height="18" id="stNameDSC">

Answer 1

嘿，您可能需要在HTML中進行一些澄清，也許這就是您要尋找的內容： 演示 http://jsfiddle.net/jKSsW/

這是在jQuery中。 請讓我知道如果您將問題標記為錯誤，我將刪除我的帖子！

希望能有所幫助，加油！