jq按json数据某一字段进行排序

最新推荐文章于 2024-07-24 20:02:07 发布

夏天的甲虫

最新推荐文章于 2024-07-24 20:02:07 发布

阅读量7.3k

点赞数

分类专栏：学习积累

本文链接：https://blog.csdn.net/u012076852/article/details/51965697

版权

学习积累专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>导航条吸附效果,并随着页面滚动选中相应导航内容</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <script type="text/javascript" src="js/jquery.js"></script>
    <style type="text/css">
    .content-box{
        border: 1px solid red;
        padding: 20px;
        margin: 20px;
    }
    .content-box h3{
        font-size: 20px;
        font-weight: normal;
        margin-bottom: 20px;
    }
    #normal{
        line-height: 40px;
        font-size: 14px;
        color: #000000;
    }
    #sort{
        line-height: 40px;
        font-size: 18px;
        color: red;
    }

    .content-box li{
        border-bottom: 1px solid #000000;
        padding: 10px 20px;
    }
    .content-box li p{
        line-height: 20px;
    }
    #normalObj{
        margin-bottom: 30px;
    }
    </style>
</head>
<body>
    <div class="content-box">
        <h3>普通数组</h3>
        <div id="normal"></div>
        <div id="sort"></div>
    </div>

    <div class="content-box">
        <h3>数组里面包对象</h3>
        <div id="normalObj">
            <h4>排序之前：</h4>
        </div>
        <div id="sortObj">
            <h4>按distance排序之后：</h4>
        </div>
    </div>

    <script type="text/javascript">
    //普通数组排序
    var normalArray = [4,7,3,5,2,6,9];
    $("#normal").text("排序之前：" + normalArray);
    normalArray.sort(function(a,b){
        return a - b;
    });
    $("#sort").text("排序之后：" + normalArray);

    //数组里面包对象,根据对象某个字段对数组进行排序
    var objArray = [
        {
            address:"十里长街延长线",
            distance:"1506",
            pointlat:25.006991,
            pointlng:102.724982,
            title:"海贝中英文小学"
        },
        {
            address:"陈家段附近",
            distance:"628",
            pointlat:24.99059,
            pointlng:102.723799,
            title:"陈家小学"
        },
        {
            address:"云南省昆明市西山区前福路",
            distance:"1117",
            pointlat:24.996976,
            pointlng:102.707486,
            title:"云南衡水实验中学西山校区"
        }
    ];
    
    var html = "<ul>";
    for (var i = 0; i < objArray.length; i++) {
        html += "<li>";
        html += "<p>address:" + objArray[i].address + "</p>";
        html += "<p>distance:" + objArray[i].distance + "</p>";
        html += "<p>pointlat:" + objArray[i].pointlat + "</p>";
        html += "<p>pointlng:" + objArray[i].pointlng + "</p>";
        html += "<p>title:" + objArray[i].title + "</p>";
        html += "</li>";
    }
    html += "</ul>";
    $("#normalObj").append(html);
    //根据对象的distance字段进行排序
    objArray.sort(function(a,b){
        return a.distance - b.distance;
    });
    var sorthtml = "<ul>";
    for (var i = 0; i < objArray.length; i++) {
        sorthtml += "<li>";
        sorthtml += "<p>address:" + objArray[i].address + "</p>";
        sorthtml += "<p>distance:" + objArray[i].distance + "</p>";
        sorthtml += "<p>pointlat:" + objArray[i].pointlat + "</p>";
        sorthtml += "<p>pointlng:" + objArray[i].pointlng + "</p>";
        sorthtml += "<p>title:" + objArray[i].title + "</p>";
        sorthtml += "</li>";
    }
    sorthtml += "</ul>";
    $("#sortObj").append(sorthtml);
    </script>
</body>
</html>