DOM排序

冷冷冷的喵
549 阅读2分钟

要求：

  • 参考下面的示例代码，用js从
      中提取出城市以及对应的空气质量
    • 将数据排序后，在resort列表中显示出来
    <!DOCTYPE>
<html>
  <head>
    <meta charset="utf-8">
    <title>Task 4</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>

    放代码：

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>DOM排序</title>
    <script type="text/javascript">
    /*1.用js从<ul id="source">中提取出城市以及对应的空气质量
      2.将数据排序后，在resort列表中显示出来
      
      先用documentgetElementBy..方法提取出城市及对于空气质量
      */
        window.onload=function() {
            
           
            var btn=document.getElementById('sort-btn');
            
            btn.onclick=function(){ 

                var oUl=document.getElementById('source');
                var aLi=oUl.getElementsByTagName('li');
                
                var $aLi=[];
                for(var i=0;i<aLi.length;i++){
                    $aLi[i]=aLi[i];
                   
                }
                $aLi.sort(function(li1,li2){
                    var n1=parseInt(li1.innerHTML.match(/\d{2,}/g)); 
                    //提取数字（此正则表达式只能匹配两位数及以上数字）
				    var n2=parseInt(li2.innerHTML.match(/\d{2,}/g));
				    return n2-n1; 
                });

                for(var i=0;i<$aLi.length;i++){
                    
	   document.getElementById("resort").innerHTML+='<li>'+$aLi[i].innerHTML+'</li>';
                }
            }
        }
    </script>
</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">
               
        </ul>

        <button id="sort-btn" >排序</button>
</body>
</html>
    • aLi=oUl.getElementsByTagName('li');这里得到的li后，直接操作的会直接对页面内容产生影响，一般先放入数组中，然后操作数组。
    • 我们想得到<b>标签里面的数字进行排序，且前面的内容(城市。。。）要和对应数字在一起
    • $aLi[i].innerHTML得到的是字符串，因此可以用正则表达式提取出里面的数字，排序时就可以实现每个<li>里面的内容作为一个整体进行排序
avatar
文章
阅读
粉丝