JavaScript/jQuery如何选择两个ID间的li范围并完成字母排序

• 选择器定位错误：$("#Own > li").nextUntil('#firstDivider') 以#Own下所有直接子li为查找起点，会把分组标题本身、甚至Charts分组的列表项都纳入查找范围，无法精准圈定「Data Grid标题和firstDivider分隔符之间的普通列表项」范围。
• 插入位置错误：排序完成后直接调用appendTo("#Own")，会把排好序的元素直接塞到整个列表的最末尾，完全打乱其他分组的原有结构，不会保留在Data Grid分组的内部区域。
• 排序逻辑反向：你编写的asc_sort对比逻辑颠倒，实际会得到Z-A的降序结果，无法匹配字母升序的要求。

直接基于分组标题定位相邻的列表项范围，排序后插回原位置即可，示例代码：

// 升序排序函数：按列表项文本A-Z顺序，不区分大小写
function asc_sort(a, b) {
  const textA = $(a).text().trim().toUpperCase();
  const textB = $(b).text().trim().toUpperCase();
  return textA < textB ? -1 : textA > textB ? 1 : 0;
}

// 新增Belgium列表项
$('<li><a>Belgium</a></li>').insertAfter("#datatables");

// 选中#datatables到#firstDivider之间的所有普通列表项（不含标题、分隔符本身）
const $groupItems = $('#datatables').nextUntil('#firstDivider');
// 对列表项执行排序
const $sortedItems = $groupItems.sort(asc_sort);
// 将排序后的元素按顺序插回#datatables后方，自动替换原位置的乱序内容
$('#datatables').after($sortedItems);

实现原理：jQuery的after()方法会把传入的节点从原有位置移动到目标元素后方，不会重复渲染，也不会干扰其他分组的结构——比如Charts分组、分隔符、标题的位置都会完全保留，最终Data Grid分组下的列表项会自动按Austria、Belgium、China的顺序排列。

如果需要适配动态场景（不用手动写死每个分组的ID），可以做通用排序逻辑，遍历所有下拉分组标题自动排序：

// 通用排序方法：自动排序所有下拉分组的列表项
function sortAllDropdownGroups() {
  $('#Own .dropdown-header').each(function() {
    const $currentHeader = $(this);
    // 取当前标题后方，直到下一个分组标题/分隔符前的所有普通列表项
    const $items = $currentHeader.nextUntil('.dropdown-header, .divider');
    // 排序后插回标题后方
    $currentHeader.after($items.sort(asc_sort));
  });
}

每次新增完列表项，直接调用sortAllDropdownGroups()即可完成全部分组的排序，不需要手动定位每个分组的边界。

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