Question

我是按价格值排序div元素的问题。代码的功能正常，但似乎它没有正确排序数字。

正如您在按下按钮时从我的jsfiddle中看到的那样，在数字102.35和200之后出现了数字21.35。

任何人都可以对此有所了解吗？

这是html

<div class="wrap">
    <button id="numBnt">Numerical</button>
    <div id="container">
      <div class="box">
        <h2>10.35</h2>  
      </div>
            <div class="box">
        <h2>21.35</h2>  
      </div>
            <div class="box">
        <h2>21.35</h2>  
      </div>
            <div class="box">
        <h2>102.35</h2>  
      </div>
            <div class="box">
        <h2>10.35</h2>  
      </div>
            <div class="box">
        <h2>10.35</h2>  
      </div>
            <div class="box">
        <h2>10.95</h2>  
      </div>
            <div class="box">
        <h2>100.35</h2>  
      </div>
      <div class="box">
        <h2>100.05</h2>
      </div>

      <div class="box">
        <h2>200</h2>  
      </div>

      <div class="box">
        <h2>5,510.25</h2>
      </div>
    </div>
  </div>

和javascript

var $divs = $("div.box");

$('#numBnt').on('click', function () {
    var numericallyOrderedDivs = $divs.sort(function (a, b) {
        return $(a).find("h2").text() > $(b).find("h2").text();
    });
    $("#container").html(numericallyOrderedDivs);
});

这是jsfiddle。

http://jsfiddle.net/C2heg/370/

Answer 1

您需要解析数字，使用parseFloat。
您需要从文本中删除,。

代码：

var numericallyOrderedDivs = $divs.sort(function (a, b) {
    return parseFloat($(a).find("h2").text().replace(/,/g, '')) > parseFloat($(b).find("h2").text().replace(/,/g, ''));
});

jsfiddle Demo

演示：

var $divs = $("div.box");


$('#numBnt').on('click', function() {
  var numericallyOrderedDivs = $divs.sort(function(a, b) {
    return parseFloat($(a).find("h2").text()) > parseFloat($(b).find("h2").text());
  });
  $("#container").html(numericallyOrderedDivs);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="wrap">
  <button id="numBnt">Numerical</button>
  <div id="container">
    <div class="box">
      <h2>10.35</h2> 
    </div>
    <div class="box">
      <h2>21.35</h2> 
    </div>
    <div class="box">
      <h2>21.35</h2> 
    </div>
    <div class="box">
      <h2>102.35</h2> 
    </div>
    <div class="box">
      <h2>10.35</h2> 
    </div>
    <div class="box">
      <h2>10.35</h2> 
    </div>
    <div class="box">
      <h2>10.95</h2> 
    </div>
    <div class="box">
      <h2>100.35</h2> 
    </div>
    <div class="box">
      <h2>100.05</h2>

    </div>
    <div class="box">
      <h2>200</h2> 
    </div>
    <div class="box">
      <h2>5510.25</h2>

    </div>
  </div>
</div>

Answer 2

您获得这些结果的原因是您的排序不是数字，而是基于数字的规范值。

21.35在102.35之后出现的原因是1中的数字102.35小于2中的数字21.35 0中的200小于1中的21.35。

<强>修正：在排序之前解析为要浮动的数字

var numericallyOrderedDivs = $divs.sort(function (a, b) {
    return parseFloat($(a).find("h2").text()) > parseFloat($(b).find("h2").text());
});

更新了fiddle

Javascript排序没有正确排序

2 个答案: