Jquery如何实现div的移动？

魔术世界中文版 2012-12-12 03:50:08

今天做了一个在线取题的小程序，首先由数据库读出15个题，加载完毕后在最后一个题的后面增加一个div为其绑定一个clck事件，内容为“点击继续取题”，每次点击这个div都会触发事件，直到题目取完为止。我想问的是这个div层怎么能随着题目的加载每次都能移动到最后一个题的后面。现在这个div层是固定在15题的后面的，
我希望的结果是点击一次，div能移动到30题的后面，再点击一次div移动到45题后面…………
给出代码如下



<script type="text/JavaScript">

$(function(){  

	var i=1;

	$("#finish").append("点我加载题目");

	$("#finish").click(function(){

	//$("#finish").hide();

	$.getJSON("3php.php",{page:i},function(json){   

		if(json){

			var cnt=json.length;

			var str = "";       

			$.each(json,function(index,array){      

				var str = "<div class=\"single_item\"><div class=\"element_head\">";             

				var str =str+"<div class=\"date\">"+array['date']+"</div>";             

				var str=str+"<div class=\"author\">"+array['author']+"</div>";  

			    var str=str+"<div class=\"content\">"+array['content']+"</div></div></div>"; 

				$("#container").append("我是由服务器加载的题目:"+str);    

			});

			i++;

			if(cnt<15){

				 $("#finish").hide();

				$(".nodata").show().html("题目加载完毕");  

			}else{

									

				}



								



								

					}

						   

						   

				});

				

			});

		})



</script>

<div id="container">    

 <?php   

 $query=mysql_query("sql语句");   

 while ($row=mysql_fetch_array($query)) {   

	echo "我是由数据库加载的题目";

 ?>    

 <div class="single_item" id="single_item">   

	<div id="element_head">     

		<div class="date"><?php echo $row['1'];?></div>          

		<div class="author"><?php echo $row['2'];?></div>   

		<div class="content"><?php echo $row['3'];?></div>  

	</div>         	

 </div>

<?php } ?> 

<center><div id="finish"></div><center>

<div class="nodata"></div>