美文网首页
jQ 根据div 内的数字 对div进行排序 -正序-倒序

jQ 根据div 内的数字 对div进行排序 -正序-倒序

作者: 端木安玉 | 来源:发表于2019-08-14 09:53 被阅读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);
        });
    })
    

    拿走不谢

    相关文章

      网友评论

          本文标题:jQ 根据div 内的数字 对div进行排序 -正序-倒序

          本文链接:https://www.haomeiwen.com/subject/cavwjctx.html