jQ 根据div 内的数字 对div进行排序 -正序-倒序
2019-08-14 本文已影响0人
端木安玉
直接上代码:
<div class='container'>
<div id='1'>
<div class='name'>bbbb</div>
<div class='number'><input type='text' value='110'></div>
</div>
<div id='2'>
<div class='name'>cccc</div>
<div class='number'><input type='text' value='120'></div>
</div>
<div id='3'>
<div class='name'>dddd</div>
<div class='number'><input type='text' value='140'></div>
</div>
</div>
<div id="desc"> 倒序</div>
<div id="sc"> 正序</div>
根据input里面的value值对div进行排序,使用jquery实现。
$(function() {
var asc = function(a, b) {
return $(a).find('input').val() > $(b).find('input').val() ? 1 : -1;
}
var desc = function(a, b) {
return $(a).find('input').val() > $(b).find('input').val() ? -1 : 1;
}
var sortByInput = function(sortBy) {
var sortEle = $('.container>div').sort(sortBy);
$('.container').empty().append(sortEle);
}
$('#desc').click(function() {
sortByInput(desc);
});
$('#asc').click(function() {
sortByInput(asc);
});
})
拿走不谢