按ID排列页面div元素

qymdf4 2009-12-29 02:50:26
页面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>
...全文
188 9 打赏 收藏 举报
写回复
9 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
xmliy 2009-12-29
  • 打赏
  • 举报
回复
[Quote=引用 6 楼 qymdf4 的回复:]
引用 2 楼 xmliy 的回复:
HTML code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <metahttp-equiv="Content-Type" content="text/html; charset=utf-8"> <title>排序 </title> </head?-

弱弱的问一句,从大到小怎么排列?
[/Quote]

排序改为:
divIDs.sort(function(e1, e2) { return e2.id - e1.id; });
yixianggao 2009-12-29
  • 打赏
  • 举报
回复
[Quote=引用 6 楼 qymdf4 的回复:]
弱弱的问一句,从大到小怎么排列?

颠倒相减顺序!

L@_@K
[/Quote]
        divIDs.sort(function(e1, e2) {
return e2.id - e1.id;
});
郭大侠_ 2009-12-29
  • 打赏
  • 举报
回复
刚才那个ff下不行,修改如下:
<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>
qymdf4 2009-12-29
  • 打赏
  • 举报
回复
[Quote=引用 2 楼 xmliy 的回复:]
HTML code<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><metahttp-equiv="Content-Type" content="text/html; charset=utf-8"><title>排序</title></head?-
[/Quote]
弱弱的问一句,从大到小怎么排列?
郭大侠_ 2009-12-29
  • 打赏
  • 举报
回复
jQuery版
<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>
qingYun1029 2009-12-29
  • 打赏
  • 举报
回复
楼上好!

不过这用在什么地方啊?把内容排一下序不就行了吗!
Click_Me 2009-12-29
  • 打赏
  • 举报
回复

<!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>

xmliy 2009-12-29
  • 打赏
  • 举报
回复

<!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>

qymdf4 2009-12-29
  • 打赏
  • 举报
回复
等待高手回复
相关推荐
发帖
JavaScript

8.7w+

社区成员

Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
帖子事件
创建了帖子
2009-12-29 02:50
社区公告
暂无公告