如何使用JavaScript根据URL参数实现div卡片动态排序置顶

问题根源 #

你写的排序逻辑不生效，核心是三个问题：

• sort比较函数完全没用到遍历传入的a、b两个元素对象，只根据card参数固定返回1/-1，本质是对整个列表做无差别的正/逆序排列，自然没法精准把指定卡片挪到首位
• 你给的示例URL里group参数传的是teams，但现有switch分支写的是case 'equipos'，参数不匹配的话，分组激活和排序逻辑根本不会触发
• jQuery的sort和原生数组sort规则一致：比较函数返回值小于0时a排在b前面，返回值大于0时b排在a前面，返回0时两者保持原有顺序，你之前的写法完全没遵循这个规则做元素对比。

实现方式 #

优先推荐给每个卡片加data-type自定义属性做类型标识，比读取p标签文本稳定，后续改卡片文案不会影响排序逻辑，修改后的HTML结构：

<div class="container-equipos" id="equipos">
  <div class="equipos" data-equipo="1" data-type="pro">
      <img src="./img/telefono.png" alt="">
      <p>Plan Libre Pro</p>
  </div>
  <div class="equipos" data-equipo="2" data-type="plus">
      <img src="./img/telefono.png" alt="">
      <p>Plan Libre Plus</p>
  </div>
  <div class="equipos" data-equipo="3" data-type="ultra">
      <img src="./img/telefono.png" alt="">
      <p>Plan Libre Ultra</p>
  </div>
</div>

排序逻辑很简单：对比两个相邻卡片时，判断哪个是URL参数指定的目标卡片，就把它往前排，其余非目标卡片保持原有顺序即可，同时记得修正switch的分支匹配值，和URL传入的group参数保持一致。

修正后的完整JS代码 #

const urlSearchParams = new URLSearchParams(window.location.search);
if (urlSearchParams) {
  const card = urlSearchParams.get('card')
  const group = urlSearchParams.get('group')
  const tab = urlSearchParams.get('tab')

  const equipos = document.querySelector('#equipos');
  const internet = document.querySelector('#internet');
  const planes = document.querySelector('#planes');

  switch(group){
    // 这里要和URL传入的group参数值对应，示例URL传的是teams，如果要匹配equipos改URL参数即可
    case 'teams': {
      equipos.classList.add('active');
      if(equipos.classList.contains('active')){
        const $wrap = $('.container-equipos');
        $wrap.find('.equipos').sort(function(a, b){
          // 读取两个卡片的类型标识
          const aType = $(a).data('type');
          const bType = $(b).data('type');
          // a是目标卡片，排到前面
          if (aType === card && bType !== card) return -1;
          // b是目标卡片，排到前面
          if (aType !== card && bType === card) return 1;
          // 都不是目标卡片，保持原有顺序
          return 0;
        }).appendTo($wrap);
      }
      break;
    }
  }
}

如果你不想修改现有HTML结构，也可以直接匹配p标签的文本内容，把代码里读取aType、bType的两行替换成下面的代码就行：

const aType = $(a).find('p').text().toLowerCase().includes(card) ? card : '';
const bType = $(b).find('p').text().toLowerCase().includes(card) ? card : '';

这种写法不需要改动HTML，但后续如果修改了卡片标题文本，可能出现匹配失效的问题，优先推荐加data-type属性的方案。

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