Jquery中的数组排序问题（按价格排序）

Question

我正在按价格和字母顺序对商品进行排序。 它按字母顺序排序非常好。它正在排序价格数组，但不根据排序后的价格打印对象。在 console.log 中一切都做得很完美，但是当我选择价格从低到高的选项时，它不会对项目进行任何更改，而在控制台中进行。

$(document.body).on('change', '#products-sorting', function() {

  var priceArr = [];
  var nameArr = [];
  for (var i = 0; i < tempArr.length; i++) {
    var price = $(tempArr[i]).find('.addToWishlist').data("price").replace("$", "");
    var name = $(tempArr[i]).find('.addToWishlist').data("name");
    priceArr.push(price)
    nameArr.push(name);
  }
  //sort by Price
  for (var n = 0; n < priceArr.length; n++) {
    for (var i = 0; i < tempArr.length; i++) {
      //sort price low to high
      if ($(this).val() === 'Price, low to high') {
        priceArr.sort(function(a, b) {
          return a - b
        })
      }
      //sort price high to low
      if ($(this).val() === 'Price, high to low') {
        priceArr.sort(function(a, b) {
          return b - a
        })
      }
      var price = $(tempArr[i]).find('.addToWishlist').data("price").replace("$", "");
      if (priceArr[n] == price)
        $("#product-items").append(tempArr[i])
    }
  }
  //console.log(priceArr)
  //sort Alphabetically
  for (var n = 0; n < nameArr.length; n++) {
    for (var i = 0; i < tempArr.length; i++) {
      //sort alphabetically A to Z 
      if ($(this).val() === 'Alphabetically, A to Z')
        nameArr.sort();
      //sort alphabetically Z to A
      if ($(this).val() === 'Alphabetically, Z to A') {
        nameArr.sort();
        nameArr.reverse()
      }
      var name = $(tempArr[i]).find('.addToWishlist').data("name");
      if (nameArr[n] == name)
        $("#product-items").append(tempArr[i])
    }
  }

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="select-box" class="clearfix">
  <label for="products">Sort by</label>
  <select name="products" id="products-sorting">
    <option value="Featured">Featured</option>
    <option value="Alphabetically, A to Z">Alphabetically, A to Z</option>
    <option value="Alphabetically, Z to A">Alphabetically, Z to A</option>
    <option value="Price, low to high">Price, low to high</option>
    <option value="Price, high to low">Price, high to low</option>
  </select>
</div>

Answer 1

您不需要在循环内进行排序。只需对tempArr 进行排序，而不是复制到priceArr 和nameArr。然后您可以将tempArr 附加到容器以按排序顺序显示它。

$(document.body).on('change', '#products-sorting', function() {

  function getPrice(el) {
    return parseFloat($(el).find('.addToWishlist').data("price").replace("$", ""));
  }

  function getName(el) {
    return $(el).find('.addToWishlist').data("name");
  }

  switch ($(this).val()) {
    //sort price low to high
    case 'Price, low to high':
      tempArr.sort((a, b) => getPrice(a) - getPrice(b));
      break;
      //sort price high to low
    case 'Price, high to low':
      tempArr.sort((a, b) => getPrice(b) - getPrice(a));
      break;
    case 'Alphabetically, A to Z':
      tempArr.sort((a, b) => getName(a).localeCompare(getName(b)));
      break;
    case 'Alphabetically, Z to A':
      tempArr.sort((a, b) => getName(b).localeCompare(getName(a)));
      break;
  }
  
  $("#product-items").empty().append(tempArr);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="select-box" class="clearfix">
  <label for="products">Sort by</label>
  <select name="products" id="products-sorting">
    <option value="Featured">Featured</option>
    <option value="Alphabetically, A to Z">Alphabetically, A to Z</option>
    <option value="Alphabetically, Z to A">Alphabetically, Z to A</option>
    <option value="Price, low to high">Price, low to high</option>
    <option value="Price, high to low">Price, high to low</option>
  </select>
</div>