如您所见,它按字母顺序和数字顺序对95%的div排序,但它有错误。不知道为什么这么做。如果多次按下按钮,您将明白我的意思。谢谢!
它总是看起来像是第一,第二和第四盒。
var $divs = $("div.box");
$('#alphBnt').on('click', function() {
var alphabeticallyOrderedDivs = $divs.sort(function(a, b) {
return $(a).find("h1").text() > $(b).find("h1").text();
});
$("#container").html(alphabeticallyOrderedDivs);
});
$('#numBnt').on('click', function() {
var numericallyOrderedDivs = $divs.sort(function(a, b) {
return $(a).find("h2").text() > $(b).find("h2").text();
});
$("#container").html(numericallyOrderedDivs);
});
body {
background: #eee;
font-family: sans-serif;
}
.box {
background: lightgreen;
height: 200px;
width: 200px;
display: inline-block;
}
.box h1 {
color: white;
font-size: 1em;
text-align: center;
}
.box h2 {
color: black;
font-size: 2.5em;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<button id="alphBnt">Alphabetical</button>
<button id="numBnt">Numerical</button>
<div id="container">
<div class="box">
<h1>A</h1>
<h2>7/10</h2>
</div>
<div class="box">
<h1>B</h1>
<h2>8/10</h2>
</div>
<div class="box">
<h1>C</h1>
<h2>6.8/10</h2>
</div>
<div class="box">
<h1>D</h1>
<h2>8/10</h2>
</div>
<div class="box">
<h1>E</h1>
<h2>510.25</h2>
</div>
<div class="box">
<h1>F</h1>
<h2>5,512</h2>
<div class="box">
<h1>G</h1>
<h2>7/10</h2>
</div>
<div class="box">
<h1>H</h1>
<h2>8/10</h2>
</div>
<div class="box">
<h1>I</h1>
<h2>6.8/10</h2>
</div>
<div class="box">
<h1>J</h1>
<h2>8/10</h2>
</div>
<div class="box">
<h1>K</h1>
<h2>510.25</h2>
</div>
<div class="box">
<h1>L</h1>
<h2>5,512</h2>
</div>
sort()
的回调函数期望将负数,0或正值作为返回值,因为您返回的布尔值会将其false
视为0,该值被视为相等。如果您尝试使用此排序功能,则会看到它起作用:
$('#alphBnt').on('click', function () {
var alphabeticallyOrderedDivs = $divs.sort(function (a, b) {
var at = $(a).find("h1").text();
var bt = $(b).find("h1").text();
return at > bt ? 1 : (at < bt ? -1 : 0);
});
$("#container").html(alphabeticallyOrderedDivs);
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句