使用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中。 请让我知道如果您将问题标记为错误，我将删除我的帖子！

希望能有所帮助，加油！