Проблемы совместимости браузера JQuery с сортировкой div

Question

Я пытаюсь сделать функцию поиска / сортировки для моего сайта, и все работает на 110% на FF.В chrome все работает, кроме dualSort, в котором он сортирует только по содержимому H4, а не по цене, а в IE / Edge при сортировке удаляет все дочерние элементы tBox.

function sortAscend() {
  var sortAscend = $('.tBox').sort(function(a, b) {
    return (parseFloat($(a).find(".tPrice").text().replace(/[^0-9]/g, '')) > parseFloat($(b).find(".tPrice").text().replace(/[^0-9]/g, '')) ? 1 : -1);
  });
  $("#DB").html('').append(sortAscend);
}

function sortDesc() {
  var sortDesc = $('.tBox').sort(function(a, b) {
    return (parseFloat($(a).find(".tPrice").text().replace(/[^0-9]/g, '')) < parseFloat($(b).find(".tPrice").text().replace(/[^0-9]/g, '')) ? 1 : -1);
  });
  $("#DB").html('').append(sortDesc);
}

function dualSort() {
  var yearSort = $('.tBox').sort(function(a, b) {
    var $year1 = parseFloat($(a).find("H4").text().replace(/[^0-9]/g, ''));
    var $year2 = parseFloat($(b).find("H4").text().replace(/[^0-9]/g, ''));
    var $price1 = parseFloat($(a).find(".tPrice").text().replace(/[^0-9]/g, ''));
    var $price2 = parseFloat($(b).find(".tPrice").text().replace(/[^0-9]/g, ''));
    if ($year1 === $year2) {
      return (($year1 > $year2) ? -1 : ($price1 < $price2) ? 1 : 0);
    } else {
      return ($year1 > $year2 ? 1 : -1);
    }
  });
  $("#DB").html('').append(yearSort);
}

<div id="DB">
 <div class="tBox">
   <H4>5 Bottles</H4>
   <div class="tPrice">$12.95</div>
 </div>
 <div class="tBox">
   <H4>10 Bottles</H4>
   <div class="tPrice">$15.95</div>
 </div>
 <div class="tBox">
   <H4>10 Bottles</H4>
   <div class="tPrice">$19.95</div>
 </div>
 <div class="tBox">
   <H4>3 Bottles</H4>
   <div class="tPrice">$7.95</div>
 </div>
</div>

Я пробовал:

 parseFloat($(a).find(".tPrice").text(), 10) > parseFloat($(b).find(".tPrice").text(), 10) ? 1 : -1);});

и:

$('#DB').html(sortAscend);

И несколько плагинов, которые не работали, но то, что у меня есть в настоящее время - единственное, что работало за пределами FF.

Любой совет или помощь приветствуется.

Answer 1

Вы не возвращаете правильное значение из функции сравнения. Вы должны вернуть отрицательное число, когда $price1 > $price2, но вы возвращаете 0.

Я думаю, вы имели в виду $year1 > $year2 тест, чтобы быть $price1 > $price2. Но вы можете упростить все это, используя вычитание вместо нескольких сравнений.

Это также хорошая идея для clone() элементов. Что может случиться, когда все исчезнет, ​​так это то, что $("#DB").html('') разрушает все элементы в нем.

function sortAscend() {
  var sortAscend = $('.tBox').clone().sort(function(a, b) {
    return parseFloat($(a).find(".tPrice").text().replace(/[^0-9]/g, '')) - parseFloat($(b).find(".tPrice").text().replace(/[^0-9]/g, ''));
  });
  $("#DB").html('').append(sortAscend);
}

function sortDesc() {
  var sortDesc = $('.tBox').clone().sort(function(a, b) {
    return parseFloat($(b).find(".tPrice").text().replace(/[^0-9]/g, '')) - parseFloat($(a).find(".tPrice").text().replace(/[^0-9]/g, ''));
  });
  $("#DB").html('').append(sortDesc);
}

function dualSort() {
  var yearSort = $('.tBox').clone().sort(function(a, b) {
    var $year1 = parseFloat($(a).find("H4").text().replace(/[^0-9]/g, ''));
    var $year2 = parseFloat($(b).find("H4").text().replace(/[^0-9]/g, ''));
    var $price1 = parseFloat($(a).find(".tPrice").text().replace(/[^0-9]/g, ''));
    var $price2 = parseFloat($(b).find(".tPrice").text().replace(/[^0-9]/g, ''));
    return $year1 === $year2 ? $price1 - $price2 : $year1 - $year2;
  });
  $("#DB").html('').append(yearSort);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="sortAscend()">Price Ascending</button>
<button onclick="sortDesc()">Price Decending</button>
<button onclick="dualSort()">Quantity and Price</button>

<div id="DB">
  <div class="tBox">
    <H4>5 Bottles</H4>
    <div class="tPrice">$12.95</div>
  </div>
  <div class="tBox">
    <H4>10 Bottles</H4>
    <div class="tPrice">$15.95</div>
  </div>
  <div class="tBox">
    <H4>10 Bottles</H4>
    <div class="tPrice">$19.95</div>
  </div>
  <div class="tBox">
    <H4>3 Bottles</H4>
    <div class="tPrice">$7.95</div>
  </div>
</div>