52,797
社区成员
发帖
与我相关
我的任务
分享
var arra=new Array('a','b','c','d');
$(document).ready(function() {
$('span').click(function() {
$.each($('span'), function(i, n){ alert($(this).attr("id"));});
$('span').not($(this)).remove();
$.each( arra, function(i, n){ $('#mainDiv').append("<span id="+i+">"+n+"</span><br>");});
//alert($(this).attr("id"));
$(this).animate( { width:"200px",height:"200px","left":($(document).width()/2-200)+"px","top":($(document).height()/2-200)+"px" }, { queue:false, duration:3000 } );
})
});
<div id="mainDiv">
<span id="5">aaa</span><br/><span id="rela">bbb</span><span id="6">aaa</span><br/><span id="rela7">bbb</span>
</div>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>moveSpan.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
span {
border: 1px solid red;
}
</style>
<script type="text/javascript">
var arra=new Array('a','b','c','d');
$(document).ready(function() {
$('span').click(addSpan);
});
function addSpan() {
//$.each($('span'), function(i, n){ alert($(this).attr("id"));});
var temp = $(this);
alert(temp.text());
temp.parent().find("span").not(temp).remove().end().end().find("br:gt(0)").remove();
$.each(arra, function(i, n){
var spanNode = $("<br/><span>"+n+"</span>");
spanNode.click(addSpan);
temp.append(spanNode);
});
return false;//阻止事件冒泡
//$(this).animate({ width:"200px",height:"200px","left":($(document).width()/2-200)+"px","top":($(document).height()/2-200)+"px" }, { queue:false, duration:3000 } );
}
</script>
</head>
<body>
<div id="mainDiv">
<br/><span id="5">aaa</span>
<br/><span id="rela">bbb</span>
<br/><span id="6">aaa</span>
<br/><span id="rela7">bbb</span>
</div>
</body>
</html>
注意如果要添加id,那么你的id就不要重复。重复的id可能造成js冲突而失效