如何按文本内容对元素按字母排序并关联后续hidden div？

核心思路是把每个btn_expand按钮和它对应的隐藏div视为一个整体，排序时移动这个整体，而不是单独移动按钮。以下是具体实现：

假设你的菜单结构如下 #

<div class="menu-container">
  <button class="btn_expand">Banana</button>
  <div class="hidden">Banana details...</div>
  
  <button class="btn_expand">Apple</button>
  <div class="hidden">Apple details...</div>
  
  <button class="btn_expand">Cherry</button>
  <!-- 这个按钮没有对应的隐藏div -->
</div>

修改后的排序脚本 #

// 1. 获取菜单容器
const $menuContainer = $('.menu-container');

// 2. 收集所有「按钮+隐藏div」的组合
const sortableItems = $('.btn_expand').map(function() {
  const $currentBtn = $(this);
  // 检查当前按钮的下一个元素是否是带hidden类的div
  const $targetDiv = $currentBtn.next('div.hidden');
  // 存在则返回按钮+div的组合，不存在则只返回按钮
  return $targetDiv.length ? $currentBtn.add($targetDiv) : $currentBtn;
}).get();

// 3. 按按钮文本的字母顺序排序
sortableItems.sort((itemA, itemB) => {
  // 从每个组合中取出按钮的文本，统一转小写避免大小写影响排序
  const textA = $(itemA).filter('.btn_expand').text().trim().toLowerCase();
  const textB = $(itemB).filter('.btn_expand').text().trim().toLowerCase();
  // 用localeCompare处理多语言排序，比直接字符串比较更靠谱
  return textA.localeCompare(textB);
});

// 4. 重新渲染排序后的内容
$menuContainer.empty().append(sortableItems);

为什么这样能解决问题？ #

• 不再单独排序按钮，而是把按钮和它绑定的隐藏div打包成一个单元，排序时整个单元一起移动
• 排序后按钮和隐藏div的相邻关系完全保留，你原来的点击切换逻辑（$(this).next('div.hidden').toggleClass('hidden')）不需要做任何修改，依然可以正常工作

额外提示 #

如果你的隐藏div和按钮之间可能插入了其他元素（不是直接相邻），可以把next('div.hidden')改成nextUntil(':not(.hidden)').addBack()或者根据实际结构调整选择器，但按你描述的「点击btn_expand切换下一个div的显示」，说明两者是直接相邻的，上面的代码完全适用。

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