问题描述
- 根据ul里li中文本排序
-
<html> <head> <title></title> </head> <body> <ul id="ul1"> <li>2</li> <li>5</li> <li>1</li> <li>4</li> <li>3</li> </ul> </br> <input type="button" id="SortAdd" On_click="SortAdd"/>顺序 <input type="button" id="Sortjian" On_click="Sortjian"/>倒序 </body> </html>编写jQuery脚本点击“顺序”按钮实现顺序排列，点击“逆序”实现逆序排列
解决方案
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
function Sortable(ul,isResverse){
var li_list=$('li',ul);
var arr=[];
for(var i=0;i<li_list.length;i++){
arr[arr.length]=li_list[i].innerHTML;
}
arr.sort();
for(i=0;i<arr.length;i++){
if(isResverse){
li_list[i].innerHTML = arr[arr.length-1-i];
}else{
li_list[i].innerHTML = arr[i];
}
}
}
function orderli(f){
ul = $('#ul1');
Sortable(ul,f)
}
</script>
</head>
<body>
<ul id="ul1"> <li>2</li> <li>5</li> <li>1</li> <li>4</li> <li>3</li></ul>
<button onclick="orderli(0)">顺序</button>
<button onclick="orderli(1)">倒序</button>
</body>
</html>
解决方案二：
无非就是颠倒下先后位置，不过如你的用户名所说，“SQL数据库 ”做起来更简单。
解决方案三：
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
</head>
<body>
<ul id="ul1">
<li>2</li>
<li>5</li>
<li>1</li>
<li>4</li>
<li>3</li>
</ul>
</br>
<input type="button" id="SortAdd" onclick="Sort()" value="顺序"/>
<input type="button" id="Sortjian" onclick="Sort(true)" value="倒序"/>
<script>
function Sort(desc) {
var li = $('#ul1 li').get();
li.sort(function (li1, li2) { return desc ? parseInt(li2.innerHTML) - parseInt(li1.innerHTML) : parseInt(li1.innerHTML) - parseInt(li2.innerHTML) });
$('#ul1').append(li);
}
</script>
</body>
</html>
解决方案四：
上面写的那么复杂干吗，字符串能够直接比较大小的字符串能够直接比较大小的
bool desc=false;
var lis = $('li');
lis.sort(function(a,b){
var v ;
if($(a).html()>$(b).html())
{
v=1;
}
else
{
v=-1;
}
if(desc)
{
v=-v;
}
return v;
});
时间： 2025-01-21 00:32:26