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

Question

我正在尝试为我的站点创建一个 search/sort 功能，并且在 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">.95</div>
 </div>
 <div class="tBox">
   <H4>10 Bottles</H4>
   <div class="tPrice">.95</div>
 </div>
 <div class="tBox">
   <H4>10 Bottles</H4>
   <div class="tPrice">.95</div>
 </div>
 <div class="tBox">
   <H4>3 Bottles</H4>
   <div class="tPrice">.95</div>
 </div>
</div>

我试过：

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

和：

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

还有几个插件不起作用，但我目前拥有的是唯一在 FF 之外起作用的插件。

如有任何建议或帮助，我们将不胜感激。

Answer 1

您没有return从比较函数中获取正确的值。当 $price1 > $price2 时，你应该 return 一个负数，但你 returning 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">.95</div>
  </div>
  <div class="tBox">
    <H4>10 Bottles</H4>
    <div class="tPrice">.95</div>
  </div>
  <div class="tBox">
    <H4>10 Bottles</H4>
    <div class="tPrice">.95</div>
  </div>
  <div class="tBox">
    <H4>3 Bottles</H4>
    <div class="tPrice">.95</div>
  </div>
</div>

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

JQuery browser compatability issues with sorting divs

sorting

jquery

cross-browser