<!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)
答案 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();
});
});