JQ- 依据input value值给div 进行排序

最新推荐文章于 2022-09-29 00:04:32 发布
最新推荐文章于 2022-09-29 00:04:32 发布
阅读量893 收藏
点赞数
分类专栏： # JQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lm1022/article/details/79064627
版权

原 ：
这里写图片描述

升序asc ：
这里写图片描述

降序desc ：
这里写图片描述

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
</head>
<body>
<div class="sort desc" style="color: red">排序</div>
<div class="subject">
    <div class="part">
        <p><input class="num" type='text' value='99'/></p>
    </div>
    <div class="part">
        <p><input class="num" type='text' value='0'/></p>
    </div>
    <div class="part">
        <p><input class="num" type='text' value='59'/></p>
    </div>
    <div class="part">
        <p><input class="num" type='text' value='19'/></p>
    </div>
    <div class="part">
        <p><input class="num" type='text' value='89'/></p>
    </div>
    <div class="part">
        <p><input class="num" type='text' value='0'/></p>
    </div>
</div>

</body>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    $(function () {
//     ---- 排序------
        $(".sort").click(function () {
            var _this = $(this);
            if (_this.hasClass("desc")) {
                sortByInput(desc);
                _this.removeClass("desc").addClass("asc");
            } else {
                sortByInput(asc);
                _this.addClass("desc").removeClass("asc");
            }
        });
        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 = $('.subject>.part').sort(sortBy);
            $('.subject').empty().append(sortEle);
        };
    })
</script>
</html>

更新：

效果图：
这里写图片描述

代码：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>排序</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <link rel="stylesheet" href="//  <!--阿里图标库地址-->.css">

</head>
<style>
    .read-role {
        background-color: #fff;
        color: #828282;
        font-size: 0.3rem;
        height: 0.8rem;
        line-height: 0.6rem;
        padding: 0 5% 0 5%;
        border-bottom: 1px solid #eee;
    }

    .read-num {
        background-color: transparent;
        width: 0.5rem;
        border: none;
        text-align: center;
    }

    .part {
        font-size: .3rem;
        height: 1rem;
        line-height: 1rem;

    }

    .sort, .sort01 {
        width: 50%;
        display: inline-block;
        float: left;
        line-height: 0.8rem;
    }

    .sortcolor, .blue {
        color: #57d9f1 !important;
    }

    .icon-paixujiantouxia, .icon-paixujiantoushang {
        font-size: 0.25rem;
        margin-left: 2%;
        color: #828282;
        position: relative;
        left: 0;
        top: -0.01rem;
    }

    .icon-paixujiantouxia {
        left: -.43rem;
        top: 0.02rem;
    }

    input {
        border: none;
        appearance: none;
        -moz-appearance: none;
        outline: none;
        -webkit-appearance: none;
    }
</style>
<body>


<!--lists-->

<div class="read-role">
    <div class="sort desc">排序1数字<i class="iconfont icon-paixujiantoushang"></i> <i
            class="iconfont icon-paixujiantouxia"></i></div>
    <div class="sort01 desc01">排序2百分比<i class="iconfont icon-paixujiantoushang"></i> <i
            class="iconfont icon-paixujiantouxia"></i></div>
</div>

<div class="container">
        <div class="part">
            <span>数据<span class="blue"><input readonly="readonly" class="read-num" type='text' value='15'/></span> 次</span>&nbsp;&nbsp;
            <span>百分比<span class="blue">&nbsp;&nbsp;<input readonly="readonly" class="read-rate" type='text' value='42.6%'/></span> </span>
        </div>
        <div class="part">
            <span>数据<span class="blue"><input class="read-num" type='text' value='100'/></span> 次</span>&nbsp;&nbsp;
            <span>百分比<span class="blue">&nbsp;&nbsp;<input class="read-rate" type='text' value='4%'/></span> </span>
        </div>
        <div class="part">
            <span>数据<span class="blue"><input readonly="readonly" class="read-num" type='text' value='1'/></span> 次</span>&nbsp;&nbsp;
            <span>百分比<span class="blue">&nbsp;&nbsp;<input readonly="readonly" class="read-rate" type='text' value='30%'/></span> </span>
        </div>
</div>

</body>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<script>

    var up,down, //    排序1的上下箭头图标
     up01,down01;//    排序2的上下箭头图标

//    排序1之数字大小排序
    $(".sort").click(function () {
        var _this = $(this);
        up = _this.find(".icon-paixujiantoushang");
        down = _this.find(".icon-paixujiantouxia");
        if (_this.hasClass("desc")) {
            sortByInput(desc);
            _this.removeClass("desc").addClass("asc");
            down.addClass("sortcolor");
            up.removeClass("sortcolor");
            up01.removeClass("sortcolor");
            down01.removeClass("sortcolor");


        } else {
            up.addClass("sortcolor");
            down.removeClass("sortcolor");
            up01.removeClass("sortcolor");
            down01.removeClass("sortcolor");
            sortByInput(asc);
            _this.addClass("desc").removeClass("asc");
        }
    });
    var asc = function (a, b) {
        var a = $(a).find('.read-num').val();
        var b = $(b).find('.read-num').val();
        return a - b;
    };
    var desc = function (a, b) {
        var a = $(a).find('.read-num').val();
        var b = $(b).find('.read-num').val();
        return b - a;
    };
    var sortByInput = function (sortBy) {
        var sortEle = $('.container>.part').sort(sortBy);
        $('.container').empty().append(sortEle);
    };

//    排序2之百分比排序
    $(".sort01").click(function () {
        var _this = $(this);
        up01 = _this.find(".icon-paixujiantoushang");
        down01 = _this.find(".icon-paixujiantouxia");
        if (_this.hasClass("desc01")) {
            down01.addClass("sortcolor");
            up01.removeClass("sortcolor");
            down.removeClass("sortcolor");
            up.removeClass("sortcolor");
            sortByInput(desc01);
            _this.removeClass("desc01").addClass("asc01");
        } else {
            up01.addClass("sortcolor");
            down01.removeClass("sortcolor");
            down.removeClass("sortcolor");
            up.removeClass("sortcolor");
            sortByInput(asc01);
            _this.addClass("desc01").removeClass("asc01");
        }
    });
    var asc01 = function (a, b) {
        var m = $(a).find('.read-rate').val();
        var n = $(b).find('.read-rate').val();
        var a = m.replace(/%/g, '');
        var b = n.replace(/%/g, '');
        return a - b;
    };
    var desc01 = function (a, b) {
        var m = $(a).find('.read-rate').val();
        var n = $(b).find('.read-rate').val();
        var a = m.replace(/%/g, '');
        var b = n.replace(/%/g, '');
        return b - a;
    };


    var html = document.documentElement;
    var hWidth = html.getBoundingClientRect().width;
    html.style.fontSize = hWidth / 7.5 + 'px';


</script>
</html>
Lucy-
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery在div中去input的值
04-19
console.log("Input Value: " + inputValue); // 更新input的值 $("#myInput").val("新值"); }); ``` 这段代码会在文档加载完成时运行，获取input的值，并将其输出到浏览器的控制台。同时，它还会将input的值...
jQuery实现提交表单时不提交隐藏div中input的方法
10-16
在本例中，我们探讨的是如何使用jQuery来实现一个特定的功能：在提交表单时，不包括隐藏div中的input元素的值。这是因为通常情况下，表单在提交时会包含所有可见或不可见的input元素的值，而我们有时希望隐藏部分...
jQuery如何对div进行排序
qq_16932655的博客
06-27 4456
例： div class='container'> div id='1'> div class='name'>bbbb div class='number'>input type='text' value='110'> div id='2'> div class='name'>cccc div class='number'>input type='text'
JS 对象按照value排序的实现
DullSwordCN的博客
02-18 4971
转自http://www.voidcn.com/article/p-pncouubc-c.html function objsortbyval(obj) { var keyArr = [],valArr = []; for (var key in obj) { keyArr.push(key); valArr.push(obj[key]); } for (var...
根据span value的值，排序li，可以使用jQuery
SHMNH
06-01 308
&lt;html&gt;&lt;head&gt;&lt;title&gt; 根据span value的值，排序li &lt;/title&gt;&lt;script type="text/javascript"&gt;//冒泡排序，效率有点低function sortList(){ var list=document.getElementById("oList"); var lis=lis
jquery <div> 排序
weixin_30876945的博客
01-07 150
var asc_active = function(a, b) { var av = Number($(a).find('.active_num .v').html()); var bv = Number($(b).find('.active_num .v').html()); return av>bv ? 1 : -1;}var desc_active = function(a, b...
JS根据对象属性值value排序 输出对应的key值数组
七七的博客
09-29 886
【代码】JS根据对象属性值value排序 输出对应的key值数组。
jq input标签生成
06-12
当用户按下回车键时，我们将获取input的值，并将其作为一个新的标签添加到页面上。同时，为了防止重复标签，我们还需要检查新标签是否已经存在： ```javascript $(document).ready(function () { var tagContainer...
jquery如何通过name名称获取当前name的value值
12-10
在给出的示例中，它会在所有`name`属性为`'name'`的元素后面添加一个新的`<div>`元素： ```javascript $(“*[name=’name’]”).after('<div>hello world</div>'); ``` 这将对所有匹配到的元素执行此操作，如果有...
JQuery+Ajax实现数据查询、排序和分页功能
11-25
为了实现排序功能，我们可以为每个可排序的列创建一个按钮，设置HTML自定义属性`orderfield`，值为排序字段及顺序，例如`orderfield="employeeid desc"`表示按照员工ID降序排序。对于分页，我们需要一组页码按钮，每...
jQuery利用sort对DOM元素进行排序操作
10-21
主要为大家详细介绍了JQuery利用sort对DOM元素进行排序的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
基于Element-UI的el-table，input框输入实现排序功能
weixin_30433075的博客
08-23 1224
最终效果如下 实现要求： 如果输入的内容不是非负整数，那么提示报错，并且将值变为输入前的内容； 如果输入正确，则当输入的内容发生改变并且失去焦点以后，触发事件，重新获取列表； 实现思路 使用原生的input框，更容易控制； 当输入框获取焦点以后，保存原始值； 监听回车点击事件与change事件，判断输入的值是否满足条件： 如果满足条件，那么就根据输入的内容更新内容，并且重新获取列表内容；...
div排序，jquery
artemisrj的专栏
04-21 1207
http://jsfiddle.net/zfcnM/ http://blog.csdn.net/paolei/article/details/6805007 这两个小例子都非常简单，可以作为参考
非常简洁的div排序，使用jquery
paolei的笔记
09-23 8546
这个代码很简洁 Untitled Document $(function(){ var div = $('div').toArray(
后台获取数据排序后在网页显示(Comparator)
月迷津渡丶的专栏
01-28 850
效果: 重点是右边的表格,class是Bootstrap 左边的图 --> 地区排行榜 总问题数排行 回答率排行 排行 城市 总问题数
JavaScript和JQuery获取DIV的值
牛栏山矿泉水
03-12 320
1、设计源码 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt;..
利用jq的sort()方法对页面元素dom进行升降序排列
qq_23260639的博客
07-19 3751
先写到这里后面再优化 html 1.排序按钮 &lt;span class="box"&gt; &lt;span id="sort-down"&gt;由高到低&lt;/span&gt; &lt;span id="sort-up" class="focus"&gt;由低到高&lt;/span&gt; &lt;/span
<div class="item-input"> <select class="xiaof-form-input" name="groups"> {loop $setting['groups'] $groupid $groupitem} <option id="jiumingaphp" {if $groupid == $item['groups']} selected{/if} value="2">{$groupitem['name']}</option> {/loop} </select> <!--<img class="groupsicon" src="{MODULE_URL}template/mobile/images/xiala.png">--> </div>我想拿到它每一次选中的值该怎么用jq实现
最新发布
06-01
你可以使用 jQuery 来实现获取下拉列表选中的值。比如，如果你想在下拉列表选项改变时，将选中的值打印到控制台中，你可以这样写： ``` $(document).ready(function() { $('select[name="groups"]').change(function() { var selectedValue = $(this).val(); console.log('选中的值为：' + selectedValue); }); }); ``` 这段代码首先在页面加载完成后，为名称为 "groups" 的下拉列表添加了一个 change 事件监听器。当用户选中某个选项时，事件监听器会被触发，并将选中的值保存在 $(this).val() 中。最后，将选中的值打印到控制台中。你可以根据需要修改这段代码，实现你自己的逻辑。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值