js将内容转化为数组再进行排序

原创 437396649 随笔 JS 137阅读 2018-01-05 21:05:36 举报

<html>
<head>
<meta charset="utf-8">
<title>IFE JavaScript Task 01</title>
</head>
<body>

<ul id="source">
<li>北京空气质量:<b>90</b></li>
<li>上海空气质量:<b>70</b></li>
<li>天津空气质量:<b>80</b></li>
<li>广州空气质量:<b>50</b></li>
<li>深圳空气质量:<b>40</b></li>
<li>福州空气质量:<b>32</b></li>
<li>成都空气质量:<b>90</b></li>
</ul>

<ul id="resort">
<!--
<li>第一名:北京空气质量:<b>90</b></li>
<li>第二名:北京空气质量:<b>90</b></li>
<li>第三名:北京空气质量:<b>90</b></li>
-->

</ul>

<button id="sort-btn">排序</button>

<script type="text/javascript">
/**

  • getData方法
  • 读取id为source的列表,获取其中城市名字及城市对应的空气质量
  • 返回一个数组,格式见函数中示例
    */
    function getData() {
    var lists=document.getElementById("source").getElementsByTagName("li");
    var data=new Array();
    for(var i=0;i<lists.length;i++){

    var city=lists[i].innerHTML.split('空气质量:')[0];
    var num=lists[i].children[0].innerHTML;
    data.push([city,num]); //将选取的城市和空气质量信息存到新建的数组中
    }

    return data;

}

/**

  • sortAqiData
  • 按空气质量对data进行从小到大的排序
  • 返回一个排序后的数组
    */

    function sortAqiData(data) {
    data.sort(function(item1,item2){
    return item1[1]-item2[1]; //顺序排序
    })
    return data;
    }

/**

  • render
  • 将排好序的城市及空气质量指数,输出显示到id位resort的列表中
  • 格式见ul中的注释的部分
    */
    function render(data) {
    var newlist=document.getElementById("resort");

    for(var j=0;j<data.length;j++){
    var li=document.createElement("li"); //创建新的列表
    li.innerHTML="第"+(j+1)+"名:"+data[j][0]+" 空气质量:"+data[j][1];
    newlist.appendChild(li);
    }
    }

function btnHandle() {
var aqiData = getData();
aqiData = sortAqiData(aqiData);
render(aqiData);

}

function init() {

// 在这下面给sort-btn绑定一个点击事件,点击时触发btnHandle函数
var button=document.getElementById("sort-btn");
button.onclick=function(){
btnHandle();
}
}

init();

</script>
</body>
</html>

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复