如何让带last类的Div在多列表排序后始终处于底部？

问题回顾 #

现有多组独立列表，已实现每组内元素按字母排序，但需要让带.last类的元素始终留在列表底部，且该元素后续的.hidden元素也要跟随到底部，同时不能额外包裹列表内容。

实现方案 #

核心思路是把元素分成两类处理：先排序并追加普通元素（不带.last），再把目标元素（带.last）追加到容器末尾，不用修改原有DOM结构就能满足需求。

修改后的JavaScript代码如下：

$('.parent').each(function(_, parent) {
  // 处理不带last类的元素，按字母排序后追加到容器
  $('.sort:not(.last)', parent).sort(function(a, b) {
    return a.textContent.localeCompare(b.textContent);
  }).each((index, el) => {
      const hidden = $(el).next();
      $(el).appendTo(parent);
      if (hidden.hasClass('hidden')) {
          hidden.appendTo(parent);
      }
  });

  // 处理带last类的元素，直接追加到容器末尾
  $('.sort.last', parent).each((index, el) => {
      const hidden = $(el).next();
      $(el).appendTo(parent);
      if (hidden.hasClass('hidden')) {
          hidden.appendTo(parent);
      }
  });
});

$(".btn_expand").on('click', function () {
  $(this).next("div").toggle();
});

代码说明 #

• 用.sort:not(.last)筛选出普通排序元素，按原逻辑排序后追加到容器
• 单独处理.sort.last元素，直接追加到容器末尾，确保它们始终在底部
• 保留原有.hidden元素跟随逻辑，避免展开按钮对应的隐藏内容错位

完整代码示例 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="parent">
  <div class="btn_expand sort">CCC</div>
  <div class="hidden">Hidden content shown by press CCC</div>
  <div class="btn_no_expand sort">EEE</div>
  <div class="btn_no_expand sort last">AAA</div>
  <div class="btn_no_expand sort">DDD</div>
  <div class="btn_expand sort">BBB</div>
  <div class="hidden">Hidden content shown by press BBB</div>
</div>

<br><br>

<div class="parent">
  <div class="btn_expand sort last">CCC</div>
  <div class="hidden">Hidden content shown by press CCC</div>
  <div class="btn_no_expand sort">EEE</div>
  <div class="btn_no_expand sort">AAA</div>
  <div class="btn_no_expand sort">DDD</div>
  <div class="btn_expand sort">BBB</div>
  <div class="hidden">Hidden content shown by press BBB</div>
</div>

.btn_expand{background:red;}  
.hidden{display: none;}
.last{background: green;}

$('.parent').each(function(_, parent) {
  $('.sort:not(.last)', parent).sort(function(a, b) {
    return a.textContent.localeCompare(b.textContent);
  }).each((index, el) => {
      const hidden = $(el).next();
      $(el).appendTo(parent);
      if (hidden.hasClass('hidden')) {
          hidden.appendTo(parent);
      }
  });

  $('.sort.last', parent).each((index, el) => {
      const hidden = $(el).next();
      $(el).appendTo(parent);
      if (hidden.hasClass('hidden')) {
          hidden.appendTo(parent);
      }
  });
});

$(".btn_expand").on('click', function () {
  $(this).next("div").toggle();
});

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