Jquery 如何实现ul中的ol排序？
<ul>
<ol>五<span>5</span></ol>
<ol>四<span>4</span></ol>
<ol>二<span>2</span></ol>
<ol>三<span>3</span></ol>
<ol>一<span>1</span></ol>
</ul>
数据库取出是这个样子，我想最后用Jquery控制输出到页面达到下面的效果：
<ul>
<ol>一<span>1</span></ol>
<ol>二<span>2</span></ol>
<ol>三<span>3</span></ol>
<ol>四<span>4</span></ol>
<ol>五<span>5</span></ol>
</ul>
span这个标签可有可无！
最新回答
寄烟念七晴
2024-11-26 07:54:51
如果想实现排序，你可以通过用ol的属性进行排序。下面是个小例子：
<body>
<ul id="ul">
<ol id="1"><li>1111111</li></ol>
<ol id="4"><li>2222222</li></ol>
<ol id="3"><li>3333333</li></ol>
<ol id="2"><li>4444444</li></ol>
</ul>
</body>
<script>
var oUl = document.getElementById('ul');
var aOl = oUl.children; //aOl 是一个元素集合，只是有数组的方法。但不具备sort
var arr = [];
for(var i=0;i<aOl.length;i++)
{
arr.push(aOl[i]);
}
arr.sort(function(a,b){return a.id - b.id}); //这里用了数组的sort排序。
for(var i=0;i<arr.length;i++)
{
oUl.appendChild(arr[i]); //重新加入oUl中。排序成功
}
</script>
秋雨绵绵
2024-11-26 07:54:05
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script type="text/javascript" src="jquery.1.4.4.min.js" ></script>
<script type="text/javascript">
$(function(){
$("#ci").click(function(){
var ols = new Object();
var ts = new Array();
$("#px").find("ol").each(function(i,v){
var sp = $(v).find("span").text();
ts.push(sp);
ols[sp] = $(v);
});
ts.sort();//数组的内部排序
$("#px").empty();
for(var k=0;k<ts.length;k++){
ols[ts[k]].appendTo($("#px"));
}
});
})
</script>
</head>
<body>
<button id="ci" >click it</button>
<ul id="px">
<ol>五<span>5</span></ol>
<ol>四<span>4</span></ol>
<ol>二<span>2</span></ol>
<ol>三<span>3</span></ol>
<ol>一<span>1</span></ol>
</ul>
</body>
</html>
盖世傻白甜
2024-11-26 07:58:15
<ul> 的层级辈份等同於 <ol>
所以 LZ 应该用
<ol>
<li> </li>
</ol>
或者
<ul>
<li> </li>
</ul>
LZ 的 syntax error 了，如果 JQuery 要控制输出的页面变成 <ol>
你先把数据库输出的源码贴出来看看
热门标签
