jQuery实现Div内列表按字母排序功能失效求助

核心错误修正 #

排序逻辑里存在数据属性名拼写错误：$(a).data('sortLis')少了字母t，应该和$(b)的属性名统一为sortList。这个错误会导致获取到undefined，使localeCompare比较失效，直接引发排序无效果或列表异常消失的问题。

修正后的排序代码：

// 修正版排序逻辑
var alphabeticallyOrderedDivs = $('.list-group-item').sort(function(a, b) {
  // 先获取排序文本，为空时用空字符串兜底
  var textA = $(a).data('sortList')?.toLowerCase() || '';
  var textB = $(b).data('sortList')?.toLowerCase() || '';
  return textA.localeCompare(textB);
});

var container = $("#assignedMemberList");
// 直接在原容器位置更新元素，无需移动容器位置
container.empty().append(alphabeticallyOrderedDivs);

其他排查点 #

• 确认排序时机：必须在.list-group-item动态渲染到#assignedMemberList之后执行排序代码。如果DOM中还没有这些列表项，$('.list-group-item')会是空集合，容器被清空后没有内容追加，就会出现列表消失的情况。
• 检查数据属性绑定：确保每个.list-group-item都正确设置了data-sortList属性，示例：

  <div class="list-group-item" data-sortList="Alice Smith">Alice Smith</div>
  

  若属性缺失，排序时会用空字符串比较，导致看起来没有变化。
• 简化DOM操作：原代码中detach()再重新追加到body的操作会改变容器的原始位置，破坏页面布局，直接在原容器内清空追加即可。

辅助函数优化 #

clearSelectedItem函数可以简化，无需手动遍历：

function clearSelectedItem() {
  $('#assignedMemberList .list-group-item.active').removeClass('active');
}

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