jQuery -> 克隆DOM元素

使用jQuery内置的clone函数可以克隆DOM元素,而且clone函数支持链式调用


下例是clone的一个简单用法,它做了一个ul的副本,并添加到body中。


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<ul>
			<li>list</li>
			<li>list</li>
			<li>list</li>
			<li>list</li>
		</ul>
		<script type="text/javascript" src="jquery-1.11.1.js"></script>
		<script type="text/javascript">
			<strong>$('ul').clone().appendTo('body');</strong>
		</script>
	</body>
</html>

利用clone函数我们可以完成一些更加复杂的操作

比如,克隆一个元素,然后删除被克隆的原始元素

仍然以ul为例,按照以下流程对其进行操作

  1. 获取ul(id='a')的所有li元素
  2. 为li元素添加click事件
  3. 克隆所有的li元素
  4. 把克隆的li元素添加到另一个ul(id='b')元素中
  5. 删除原始的ul(id='a')元素

代码示例如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<ul id="a">
			<li>list</li>
			<li>list</li>
			<li>list</li>
			<li>list</li>
		</ul>
		<ul id="b"></ul>
		<script type="text/javascript" src="jquery-1.11.1.js"></script>
		<script type="text/javascript">
			$('ul#a li')
				.click(function() {
					alert('List Item Clicked')
				})
				.parent()
				.clone(true)
				.find('li')
				.appendTo('#b')
				.end()
				.end()
				.end()
				.remove();
		</script>
	</body>
</html>xxx

在执行完appendTo('#b')之后,连续调用了三次end()回溯到原始的ul元素,然后进行删除

  1. 第一个end()撤销了appendTo('#b')的操作
  2. 第二个end()撤销了find('li')的操作
  3. 第三个end()撤销了clone(true)的操作
  4. 三个end()执行完之后,回到了parent()的结果集,也就是remove()的作用对象

你可能感兴趣的:(jquery,clone)