Есть обычный список li
. Каждый задан с определенной высотой. Нужно отсортировать эти блок по возрастанию. Пробовал localeCompare
но сортирует немного некорректно. В чем проблема? Или я не совсем нужный метод выбрал?
jQuery(document).ready(function($) {
var sortByHeight = function(a, b) {
var a = parseFloat($(a).css('height')) + '';
var b = parseFloat($(b).css('height')) + '';
return a.localeCompare(b);
}
var list = $("li").clone();
list.sort(sortByHeight);
for (var i = 0; i < list.length; i++) {
$('#result').append(list[i]);
}
});
ul {
list-style: none;
height: 100px;
float: left;
display: block;
}
li {
margin-right: 5px;
background: green;
width: 10px;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li style="height: 100px;"></li>
<li style="height: 10px;"></li>
<li style="height: 90px;"></li>
<li style="height: 30px;"></li>
<li style="height: 80px;"></li>
<li style="height: 50px;"></li>
<li style="height: 60px;"></li>
<li style="height: 20px;"></li>
<li style="height: 40px;"></li>
<li style="height: 70px;"></li>
</ul>
<ul id="result"></ul>