如何根据另一数组排序DOM元素？卡片排序功能异常求助

当前实现的排序功能仅更新了卡片内的名称文本，未对.flip-card元素本身进行排序，无法按照sorted_names数组的顺序重新排列DOM中的卡片。

原代码 #

const cards = document.querySelectorAll('.flip-card');
const cards_array = Array.from(cards);

async function get_NFT_data() {
  const options = {
    method: "GET",
    headers: { "x-cg-demo-api-key": "CG-NhdhrCZRnCSqdjMyf3XUu9k4" },
  };
  try {
    const response = await fetch('https://api.coingecko.com/api/v3/nfts/list?order=h24_volume_usd_asc&per_page=60', options);
    const data = await response.json();

    const names = [];
    for (let i = 0; i < data.length; i++) {
      names.push(data[i].name);
    }
    const sorted_names = names.sort();

    for (let i = 0; i < sorted_names.length; i++) {
      cards_array[i].querySelector('.flip-card-back').firstElementChild.innerHTML=`&lt;p&gt; ${sorted_names[i]}&lt;/p&gt;`;
    }

  } catch (error) {
    console.log(error);
  }
}

get_NFT_data();

问题分析 #

你现在的代码只是把排序后的名称依次替换到现有卡片的内容里，但完全没改变卡片在DOM中的位置。要实现卡片整体排序，必须先把卡片和对应的名称数据绑定，再按排序后的顺序重新排列这些卡片的DOM节点。

解决方案 #

修改思路：先建立卡片与NFT数据的关联，排序后通过父容器重新插入卡片来调整顺序。

const cards = document.querySelectorAll('.flip-card');
const cardsArray = Array.from(cards);
// 假设所有卡片都在同一个父容器下，获取这个父元素
const cardsContainer = cardsArray[0].parentNode;

async function getNFTData() {
  const options = {
    method: "GET",
    headers: { "x-cg-demo-api-key": "CG-NhdhrCZRnCSqdjMyf3XUu9k4" },
  };
  try {
    const response = await fetch('https://api.coingecko.com/api/v3/nfts/list?order=h24_volume_usd_asc&per_page=60', options);
    const data = await response.json();

    // 1. 把每张卡片和对应的NFT数据绑定在一起
    const cardDataPairs = cardsArray.map((card, index) => ({
      card,
      nft: data[index]
    }));

    // 2. 根据NFT名称排序，用localeCompare处理字符串排序更严谨
    const sortedCardPairs = cardDataPairs.sort((a, b) => {
      return a.nft.name.localeCompare(b.nft.name);
    });

    // 3. 清空父容器，按排序后的顺序重新插入卡片
    cardsContainer.innerHTML = '';
    sortedCardPairs.forEach(pair => {
      // 更新卡片内的名称文本
      pair.card.querySelector('.flip-card-back').firstElementChild.innerHTML = `<p>${pair.nft.name}</p>`;
      // 将卡片添加回父容器，完成排序
      cardsContainer.appendChild(pair.card);
    });

  } catch (error) {
    console.error(error);
  }
}

getNFTData();

关键修改点 #

• 新增cardsContainer获取卡片的父元素，这是调整卡片顺序的核心，所有卡片的排序都通过父容器的DOM操作完成
• 用cardDataPairs绑定卡片和对应NFT数据，避免排序后名称和卡片错位
• 使用localeCompare替代默认sort()，更适合处理不同语言的字符串排序
• 通过清空父容器再重新插入的方式，直接改变卡片在DOM中的位置，实现整体排序

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