按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>
...全文
197 9 打赏 收藏 转发到动态 举报
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
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
  • 打赏
  • 举报
 回复
等待高手回复
div垂直居中-CSS元素垂直居中方法的探究
针对学员疑问“div垂直居中？”引出的“CSS元素垂直居中一系列方法的探究”的针对性课程，课程包含两方面：1、文本垂直居中的解决方案；2、块级元素垂直居中的解决方案。
CSS3中li元素自动横向排列、多栏div自动横向排列的简单方法
在传统的的css中，要想实现li元素横向排列，需要用到float属性，如果使用不熟练往往引起布局的错乱。css3中提供了一种非常好的实现机制。li元素的宽度、换行等都可自动完成，并根据窗口尺寸自动调整，呈现出一定程度的响应式布局。在Chrome，Edge，IE11中显示结果都一样。 而多栏div自动横向排列的方法与上面的相似。完整代码
html和css实现 div 切割 并使多个div上下左右排列
首先看我的div布局： 图片有6个div有序排列，位置上下左右不一。 方法1：最简单的做法是设置每个div的width:px;height:px; 比如： width:1200px; height:800px; 但是这种方法在不同尺寸的电脑上就无法完全显示div或者div不能充满整个页面。 方法2：设置div的width:%;height:%;** 比如： width:20%; height:60...
DIV+CSS页面布局
现在所有的主流的、大型的 IT 企业的网站布局几乎都采用 DIV、CSS技术，有些甚至采用 DIV、CSS、表格混合进行页面布局。此类页面布局能够实现页面内容与表现的分离，提高网站访问速度、节省宽带、改善用户的体验。DIV+CSS组合技术完全有别于传统的表格排版习惯。通过DIV+CSS实现页面元素精确控制，网站风格、代码维护与更新变得卡分容易，甚至是页面的布局结构都可以通过修改CSS属性来重新定位。DIV+CSS布局的步骤大致为: 首先整体上对页面进行分块，接着按照分块设计使用div。
《Dreamweaver CS6 完全自学教程》笔记 第七章：AP Div 元素
文章目录第七章：AP Div 元素7.1 AP 元素的基本操作7.1.1 创建 AP 元素7.1.2 设置 AP 元素参数7.1.3 AP 元素属性实战：层的溢出7.2 AP 元素面板实战：调整 AP 元素的 “ z 轴”7.3 选择 AP 元素7.3.1 选择一个层7.3.2 选择多个层7.4 调整 AP 元素的大小7.4.1 调整单个层的大小7.4.2 调整多个层的大小7.5移动 AP 元素实战：为网页添加宣传语7.6 对齐 AP 元素第七章总结 第七章：AP Div 元素 7.1 AP 元素的基本
JavaScript

87,922

社区成员

224,618

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章