日期:2014-05-16  浏览次数:20381 次

Jquery如何实现div的移动?
今天做了一个在线取题的小程序,首先由数据库读出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> 

------解决方案--------------------
应该很容易啊,两个div,div1里放取到的题,div2为“点击继续取题”,div2放在div1的下面,这样每次取到的值都放在了div1里,div2不就一直在最后一个题的后面了吗