问题描述
我已经花了好几个小时弄乱了,我唯一可以缩小到的范围是,如果要排序的元素有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,则排序无法正常工作。
这是一个示例
我在轻轻地敲桌子的头! 希望有人能对此有所启发。
1楼
使用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);
});
演示: :
2楼
您的小提琴都没有用,这与元素的数量无关。
这可以工作:
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
如果第一个大于第二个,则应返回正数 ,否则返回负数 。
这是 。