如何使用jQuery按姓氏（.lname）对UI卡片进行字母顺序排序

嘿，你想按卡片里的姓氏（.lname）给这些UI卡片做字母排序对吧？我帮你整理了完整的可实现方案，包括补全的HTML示例和对应的jQuery代码，一步步来：

完整的HTML示例结构 #

先给你补全带有不同姓氏的测试卡片，方便你直接测试效果：

<div class="main">
  <div class="card">
    <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" style="width:100%">
    <div class="container">
      <h4><span class="lname">Smith</span> <span class="fname">John</span></h4>
      <p>Architect & Engineer</p>
    </div>
  </div>
  <div class="card">
    <img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar" style="width:100%">
    <div class="container">
      <h4><span class="lname">Adams</span> <span class="fname">Jane</span></h4>
      <p>Designer</p>
    </div>
  </div>
  <div class="card">
    <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" style="width:100%">
    <div class="container">
      <h4><span class="lname">Brown</span> <span class="fname">Mike</span></h4>
      <p>Developer</p>
    </div>
  </div>
</div>

jQuery排序实现代码 #

下面是核心的排序逻辑，页面加载完成后自动执行排序：

$(document).ready(function() {
  // 把jQuery卡片集合转成原生DOM数组，方便使用数组排序方法
  let cards = $('.main .card').get();
  
  // 对卡片数组按姓氏排序
  cards.sort(function(cardA, cardB) {
    // 提取两个卡片的姓氏文本，转成小写避免大小写干扰排序结果
    let lastNameA = $(cardA).find('.lname').text().toLowerCase();
    let lastNameB = $(cardB).find('.lname').text().toLowerCase();
    
    // 按字母顺序比较
    if (lastNameA < lastNameB) {
      return -1; // cardA排在cardB前面
    }
    if (lastNameA > lastNameB) {
      return 1; // cardB排在cardA前面
    }
    
    // 可选：如果姓氏相同，按名字继续排序
    let firstNameA = $(cardA).find('.fname').text().toLowerCase();
    let firstNameB = $(cardB).find('.fname').text().toLowerCase();
    return firstNameA.localeCompare(firstNameB);
  });
  
  // 把排序后的卡片重新追加到主容器，替换原有顺序
  $.each(cards, function(index, card) {
    $('.main').append(card);
  });
});

关键细节说明 #

• 用$().get()把jQuery对象转为原生DOM数组，这样才能调用数组的sort()方法
• 转小写是为了避免大小写差异导致排序错误（比如"smith"和"Smith"会被视为同一个姓氏）
• 额外添加的“姓氏相同按名字排序”逻辑是可选的，不需要的话可以直接删掉这部分代码

可选：点击按钮触发排序 #

如果不想页面加载就排序，想通过按钮触发，可以把排序逻辑封装成函数：

function sortCardsByLastName() {
  let cards = $('.main .card').get();
  cards.sort(function(cardA, cardB) {
    let lastNameA = $(cardA).find('.lname').text().toLowerCase();
    let lastNameB = $(cardB).find('.lname').text().toLowerCase();
    return lastNameA.localeCompare(lastNameB);
  });
  $.each(cards, function(index, card) {
    $('.main').append(card);
  });
}

// 绑定按钮点击事件
$('#sort-btn').click(function() {
  sortCardsByLastName();
});

对应的HTML需要添加一个按钮：

<button id="sort-btn">按姓氏字母排序</button>

内容的提问来源于stack exchange，提问作者Ibo Chief