点击第二个，删除第一个，追加到后面

原创于 2015-11-01 15:45:46 发布 · 475 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

63 篇文章

订阅专栏

本文介绍如何利用jQuery中的eq(), clone(), live() 方法实现DOM元素的动态操作，包括选择特定位置的元素、克隆元素以及为匹配的选择器附加事件处理程序。演示了在点击特定元素后，如何将其他元素动态插入到页面中。

这里用到的知识

1，匹配选择器eq()

2，clone()，以前没用过

3，live()，通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素），如果不用live，第二次将不能在点击了。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>点击第二个，追加到后面</title>
<style>
#box div{ background:#4f8a00; margin:10px 0; border:2px solid #000;}
</style>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
<script>
$(function(){
	$("#box div:eq(1)").live("click",function(){
		alert("ddd");
		$("#box div:eq(2)").after($("#box div:eq(0)").clone());
		$("#box div:eq(0)").remove();
		})
	
	})
</script>
</head>

<body>
<div id="box">
	<div id="1">1</div>
	<div id="2">2</div>
	<div id="3">3</div>
</div>
</body>
</html>