Html的Dom排序

最新推荐文章于 2021-06-07 16:26:24 发布

末小北

最新推荐文章于 2021-06-07 16:26:24 发布

阅读量588

点赞数

文章标签： html

本文链接：https://blog.csdn.net/linmufeng326/article/details/52232069

版权

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]));
    });
 }