当前位置: 代码迷 >> JavaScript >> 非常奇怪的javascript排序值行为
  详细解决方案

非常奇怪的javascript排序值行为

热度:55   发布时间:2023-06-13 12:17:53.0

我已经花了好几个小时弄乱了,我唯一可以缩小到的范围是,如果要排序的元素有14个,则不能正常工作,但是如果有13个元素,则可以正常工作。

我试图通过DIV元素在其中包含的价格值来进行基本的分类。

这是简单的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.00</h2> 
        </div>
        <div class="box">
             <h2>?5510.25</h2>

        </div>
         <div class="box">
             <h2>?19.80</h2>

        </div>
  <div class="box">
             <h2>?5510.25</h2>

        </div>
          <div class="box">
             <h2>?510.25</h2>

        </div>


    </div>
</div>

和JavaScript

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


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

div具有13个div元素,可以完美排序。

这是一个示例

然后,如果我添加另一个并使其变为14 div,则排序无法正常工作。

这是一个示例

我在轻轻地敲桌子的头! 希望有人能对此有所启发。

使用a - b代替a > b

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

演示: :

您的小提琴都没有用,这与元素的数量无关。

这可以工作:

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

$('#numBnt').on('click', function () {
    var numericallyOrderedDivs = $divs.sort(function (a, b) {
        var a = parseFloat($(a).find("h2").text().replace(/?/g, ''));
        var b = parseFloat($(b).find("h2").text().replace(/?/g, ''));

        return a - b;
    });
    $("#container").html(numericallyOrderedDivs);
});

比较两个项目时,排序函数如果相等则应返回0如果第一个大于第二个,则应返回正数 ,否则返回负数

这是 。

  相关解决方案