页面div元素乱序排列,我想通过点击超链接实现DIV按id从小到大排列,应该怎么做,源码如下:<a href="#">点击这里排序</a>
<div style="float:left;" id="1">详细内容</div>
<div style="float:left;" id="11">详细内容</div>
<div style="float:left;" id="15">详细内容</div>
<div style="float:left;" id="44">详细内容</div>
<div style="float:left;" id="32">详细内容</div>
<div style="float:left;" id="23">详细内容</div>
<div style="float:left;" id="45">详细内容</div>
<div style="float:left;" id="3">详细内容</div>
<div style="float:left;" id="1">详细内容</div>
<div style="float:left;" id="11">详细内容</div>
<div style="float:left;" id="15">详细内容</div>
<div style="float:left;" id="44">详细内容</div>
<div style="float:left;" id="32">详细内容</div>
<div style="float:left;" id="23">详细内容</div>
<div style="float:left;" id="45">详细内容</div>
<div style="float:left;" id="3">详细内容</div>
解决方案 »
- 完全用jQuery实现上下滚动效果?
- 请教大师,如果在<p>标签里,只要读取了这段<p>标签,就执行一段js代码,应该怎么弄
- ext 重加載表頭問題和添加一行問題(問很多論壇都沒解決,來個高手吧)
- 菜鸟问题:iframe里的函数调用!!
- td里的input被onclick后,该td的背景颜色随之改变。如何实现?
- 50求js源码:像window的文件列表,通过拖动鼠标该表table的列宽,双击分隔线自动调整为内容的宽度,还可以点击排序?
- Javascript函数,出现错误?不知道错误出在哪里?
- jquery中导出excel等报表文件
- 如何点击iframe内的链接?
- [js]求救一道递归题
- 如何用javascript调用本地的exe程序
- 如何获取FireFox安装路径
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>排序</title>
</head>
<body>
<a href="#" onclick="sort()">点击这里排序 </a>
<div id="sortDiv">
<div style="float:left;" id="1">详细内容1 </div>
<div style="float:left;" id="11">详细内容11 </div>
<div style="float:left;" id="15">详细内容15 </div>
<div style="float:left;" id="44">详细内容44 </div>
<div style="float:left;" id="32">详细内容32 </div>
<div style="float:left;" id="23">详细内容23 </div>
<div style="float:left;" id="45">详细内容45 </div>
<div style="float:left;" id="3">详细内容3 </div>
</div>
</body>
</html> <script type="text/javascript">
function sort() {
var sortDiv = document.getElementById('sortDiv'), divs = sortDiv.childNodes;
var divIDs = [];
for (var i = 0, count = divs.length; i < count; i++) {
divIDs.push(divs[i]);
}
divIDs.sort(function(e1, e2) {
return e1.id - e2.id;
});
for (var i = 0, count = divIDs.length; i < count; i++) {
sortDiv.appendChild(divIDs[i]);
}
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
</head>
<body>
<a id="ahref" href="#">点击这里排序 </a>
<div id="container">
<div id="1">详细内容1 </div>
<div id="11">详细内容 11</div>
<div id="15">详细内容 15</div>
<div id="44">详细内容 44</div>
<div id="32">详细内容 32</div>
<div id="23">详细内容 23</div>
<div id="45">详细内容 45</div>
<div id="3">详细内容3 </div>
</div>
<script type="text/javascript">
(function(){
function compared(div1, div2) {
return parseInt(div1.id, 10) - parseInt(div2.id, 10);
};
function sortDiv(){
var odiv = document.getElementById('container'),
sorts = odiv.getElementsByTagName('div'),
frag = document.createDocumentFragment();
var i = 0, list = [], len = sorts.length;
for(; i < len; i++) {
list[i] = sorts[i];
}
list.sort(compared);
for(var j = 0 ,len2 = list.length; j < len2; j++){
frag.appendChild(list[j]);
}
odiv.appendChild(frag);
}
document.getElementById('ahref').onclick = sortDiv;
})();
</script>
</body>
</html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>元素排序</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function sortElement()
{
var arr=new Array();
jQuery.each($("#box").find("div"),function(){
arr.push($(this).attr("id"));
});
var sortedArr=arr.sort();
var newhtml="";
jQuery.each(sortedArr,function(){
newhtml +=$("#"+this).attr("outerHTML");
});
$("#box").html(newhtml);
}
</script>
</head><body>
<a href="#" onclick="sortElement();">点击这里排序 </a>
<div id="box">
<div style="float:left;" id="15">详细内容15</div>
<div style="float:left;" id="1">详细内容1 </div>
<div style="float:left;" id="11">详细内容11 </div>
<div style="float:left;" id="44">详细内容44 </div>
<div style="float:left;" id="32">详细内容32 </div>
<div style="float:left;" id="23">详细内容23 </div>
<div style="float:left;" id="45">详细内容45 </div>
<div style="float:left;" id="3">详细内容3 </div>
</div>
</body></html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>元素排序</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function sortElement()
{
var arr=new Array();
jQuery.each($("#box").find("div"),function(){
arr.push($(this).attr("id"));
});
var newDivs=new Array();
jQuery.each(arr.sort(),function(){
newDivs.push($("#"+this));
});
$("#box").html("");
jQuery.each(newDivs,function(){
$("#box").append($(this));
});
}
</script>
</head><body>
<a href="#" onclick="sortElement();">点击这里排序 </a>
<div id="box">
<div style="float:left;" id="15">详细内容15</div>
<div style="float:left;" id="1">详细内容1 </div>
<div style="float:left;" id="11">详细内容11 </div>
<div style="float:left;" id="44">详细内容44 </div>
<div style="float:left;" id="32">详细内容32 </div>
<div style="float:left;" id="23">详细内容23 </div>
<div style="float:left;" id="45">详细内容45 </div>
<div style="float:left;" id="3">详细内容3 </div>
</div>
</body></html>
return e2.id - e1.id;
});
排序改为:
divIDs.sort(function(e1, e2) { return e2.id - e1.id; });