jquery - 使用 jquery 根据 li 元素对 ul 列表进行排序？

Question

我正在用

元素创建一个水平列表，但我想做的是根据
• 元素按字母顺序排列每个
  元素。例如

  <ul class="list">
      <li>Name</li>
      <li>Surname</li>
      <li>Unit</li>
      <li>City</li>
  </ul>
  <ul class="list">
      <li>John</li>
      <li>Boe</li>
      <li>B.A.</li>
      <li>NY</li>
  </ul>
  <ul class="list">
      <li>Jane</li>
      <li>Doe</li>
      <li>M.A.</li>
      <li>CA</li>
  </ul>
  

  并按照姓氏字段排序。有什么办法可以用 jquery 做到这一点吗？

  提前致谢

  //编辑//

  我使用的代码是这样的

  $.ajax({
      type: 'GET',
      url: 'list.php',
      data: 'id='+id,
      dataType: 'xml',
      success: function(data) {
          var xml;
          if (typeof data == "string") {
              xml = new ActiveXObject("Microsoft.XMLDOM");
              xml.async = false;
              xml.loadXML(data);
          } else {
              xml = data;
          }
  
          $(xml).find('item').each(function(){
              var id = $(this).find("id").text();
              var name = $(this).find("name").text();
              var surname = $(this).find("surname").text();
              var units = $(this).find("units").text();
              var city = $(this).find("city").text();
              $("#listContainer").append('<ul class="list" id="'+id+'"><li style="width:30px;">'+name+'</li><li style="width:100px;">'+surname+'</li><li style="width:100px;">'+units+'</li><li style="width:100px;">'+city+'</li></ul>');
          }); //close each(   
      }
  }); 
  

Answer 1

WORKING DEMO

$('.grid ul:gt(0)').each(function() {
    var txt1 = $(this).children('li:eq(1)').text();
    $(this).data('name', txt1);
});

var items = $('.grid ul');
items.sort(function(a, b) {
    var chA = $(a).data('name');
    var chB = $(b).data('name');
    if (chA < chB) return -1;
    if (chA > chB) return 1;
    return 0;
});
var grid = $('.grid');
$(grid).append(items);

和 HTML

<div class="grid">
    <ul class="list">
        <li>Name</li>
        <li>Surname</li>
        <li>Unit</li>
        <li>City</li>
    </ul>
    <ul class="list">
        <li>John</li>
        <li>Boe</li>
        <li>B.A.</li>
        <li>NY</li>
    </ul>
    <ul class="list">
        <li>Jane</li>
        <li>Doe</li>
        <li>M.A.</li>
        <li>CA</li>
    </ul>
    <ul class="list">
        <li>Lin</li>
        <li>Zyan</li>
        <li>M.A.</li>
        <li>OR</li>
    </ul>
    <ul class="list">
        <li>Matt</li>
        <li>Albright</li>
        <li>M.A.</li>
        <li>CA</li>
    </ul>
</div>

将导致:

工作原理:
我们在所需的 li :eq()
中查找文本 我们将此文本设置为每个 UL 元素的 jQuery .data()。
我们只是按检索到的 .data() 文本对 ul 进行排序 - 按字母顺序排列!

编码愉快!