UL> Li排序不在IE中工作,在chrome中工作

时间:2016-02-09 12:58:33

标签: jquery html google-chrome internet-explorer

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <input type="button" id="sort" class="asc" value="asc" />

<ul class="list">
<li>Rahul</li>
<li>Vinit</li>
<li>Ajay</li>
<li>Zareena</li>
<li>Deepak</li>
</ul>
</body>
</html>

Jquery代码如下

$(document).ready(function() {  
    $('#sort').click(function(e) {    
       var $sort = this;    
      alert($($sort).html());
        var $list = $('.list');      
        var $listLi = $('li',$list);      
        $listLi.sort(function(a, b){
            var keyA = $(a).text();
            var keyB = $(b).text();         
          if($($sort).hasClass('asc')){
                return (keyA > keyB) ? 1 : 0;
            } else {
                return (keyA < keyB) ? 1 : 0;
            }
        });
        $.each($listLi, function(index, row){
            $list.append(row);
        });
      if($($sort).hasClass('asc'))
        {
          $($sort).removeClass('asc');      
          $($sort).prop('value', 'desc');

        }
      else
        {
          $($sort).addClass('asc');          
          $($sort).prop('value', 'asc');
        }
        e.preventDefault();
    });
});

我能够在chrome中完美地运行此代码,但它不能正常运行IE(IE11)

JS BIN LINK

1 个答案:

答案 0 :(得分:1)

排序功能条件的修改完成了这项工作。我不知道为什么。

<强> DEMO

$(document).ready(function() {  
    $('#sort').click(function(e) {    
       var $sort = this;    
        var $list = $('ul.list');      
        var $listLi = $list.children();      
        var btnclass = $($sort).hasClass('asc');
        $listLi.sort(function(a, b){
            var keyA = $(a).text().toUpperCase();
            var keyB = $(b).text().toUpperCase();
            if(btnclass)
              return (keyA < keyB) ? -1 : (keyA > keyB) ? 1 : 0;
            else
              return (keyA > keyB) ? -1 : (keyA < keyB) ? 1 : 0;
        });
        alert($listLi.map(function(){
          return $(this).text();
        }).get());
        $.each($listLi, function(index, row){
            $list.append(row);
        });
        if($($sort).hasClass('asc')){
            $($sort).removeClass('asc');      
            $($sort).prop('value', 'desc');
        } else {
            $($sort).addClass('asc');          
            $($sort).prop('value', 'asc');
        }
        e.preventDefault();
    });
});