jQuery按价格排序商品数组后页面未更新问题求解

• 核心问题：排序逻辑没有分支执行，无论选择哪种排序类型，都会先执行价格排序的DOM插入、再执行字母排序的DOM插入。后执行的字母排序阶段操作会完全覆盖价格排序的结果，所以价格排序的效果永远无法呈现，只有字母排序的逻辑能生效。
• 优化点1：sort排序逻辑放在双层循环内部，会被重复执行多次，性能损耗极大，应该在循环前先完成排序。
• 优化点2：插入新排序结果前没有清空容器原有内容，会导致商品重复叠加。
• 优化点3：单独存储价格、名称数组和原始DOM元素没有做绑定，遇到多个商品价格/名称相同时会出现匹配错误。

// 初始化时存储原始商品列表，避免重复查询DOM
const originalProductList = Array.from($("#product-items").children());

$(document.body).on('change', '#products-sorting', function() {
  const currentSortType = $(this).val();
  const $productWrap = $("#product-items");
  // 清空原有列表
  $productWrap.empty();
  // 拷贝原始数组做排序，不修改原始数据
  const sortedList = [...originalProductList];

  // 价格排序分支
  if (currentSortType.includes('Price')) {
    sortedList.sort((prev, next) => {
      const pricePrev = parseFloat($(prev).find('.addToWishlist').data('price').replace('$', ''));
      const priceNext = parseFloat($(next).find('.addToWishlist').data('price').replace('$', ''));
      return currentSortType === 'Price, low to high' ? pricePrev - priceNext : priceNext - pricePrev;
    })
  } 
  // 字母排序分支
  else if (currentSortType.includes('Alphabetically')) {
    sortedList.sort((prev, next) => {
      const namePrev = $(prev).find('.addToWishlist').data('name').toUpperCase();
      const nameNext = $(next).find('.addToWishlist').data('name').toUpperCase();
      if (namePrev < nameNext) return currentSortType === 'Alphabetically, A to Z' ? -1 : 1;
      if (namePrev > nameNext) return currentSortType === 'Alphabetically, A to Z' ? 1 : -1;
      return 0;
    })
  }

  // 插入排序后的商品
  sortedList.forEach(item => $productWrap.append(item));
});

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