html的Dom排序
本来不知道sort()这个函数有这么大用处,但是今天几行代码就解决了困扰我很久的问题
<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>
Javascript代码一
$(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);
});
})
第一个代码经过验证是可用的,下面是第二个,看原理应该是可以,没怎么测试
<body>
<div data-id="1">1111111</div>
<div data-id="4">2222222</div>
<div data-id="3">3333333</div>
<div data-id="5">4444444</div>
<div data-id="2">5555555</div>
</body>
<script>
var aDiv = document.getElementsByTagName('div');
var arr = [];
for(var i=0;i<aDiv.length;i++)
{
arr.push(aDiv[i]); //aDiv是元素的集合,并不是数组,所以不能直接用数组的sort进行排序。
}
arr.sort(function(a,b){return a.getAttribute('data-id') - b.getAttribute('data-id')});
for(var i=0;i<arr.length;i++)
{
document.body.appendChild(arr[i]); //将排好序的元素,重新塞到body里面显示。
}
</script>
//思路:给div添加私有属性,通过私有属性排序。
//上面是给机遇div排序,同理可以排序li,和span标签
下面是第三个,好吧,我没看懂,目测可用
function changeOrder(order) { //参数order为获取排序顺序例如:['1','2','3']
if (typeof(order) == 'string') {
order = eval(order);
}
$.each(order, function(i){
$('.container').append(jQuery('#'+order[i]));
});
}