Question

我正在尝试为我的网站提供搜索/排序功能，并且所有功能在FF上均可正常运行110％。在chrome上，除了dualSort以外，其他所有东西都起作用，在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>

JQuery浏览器与div排序有关的兼容性问题

1 个答案: