描述: 在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点。
-
添加的版本: 1.0.after( content [, content ] )
-
content类型: String, Element, jQuery一个元素,HTML字符串,或者jQuery对象,用来插在每个匹配元素的后面。
-
content类型: String, Element, Array, jQuery添加的一个或多个DOM元素,元素的数组,HTML字符串,或jQuery对象,插在每个匹配元素的后面
-
-
添加的版本: 1.4.after( function(index) )
-
function(index)类型: Function()一个返回HTML字符串,DOM 元素, 或者 jQuery 对象的函数,插在每个匹配元素的后面。接收元素在集合中的索引位置作为参数。在函数中
this
指向元素集合中的当前元素。
-
.after()
和.insertAfter()
实现同样的功能。主要的不同是语法——特别是内容和目标的位置。 对于 .after()
, 选择表达式在函数的前面,参数是将要插入的内容。 对于.insertAfter()
, 刚好相反,内容在方法前面,它将被放在参数里元素的后面。
请看下面的HTML:
1
2
3
4
5
|
|
我们可以创建内容然后同时插在好几个元素后面:
1
|
|
每个内部的 <div>
元素得到新的内容:
1
2
3
4
5
6
7
|
|
我们也可以在页面上选择一个元素然后插在另一个元素后面:
1
|
|
如果一个被选中的元素被插在另外一个地方,这是移动而不是复制:
1
2
3
4
5
|
|
如果有多个目标元素,内容将被复制然后被插入到每个目标后面。
Inserting Disconnected DOM nodes(插入分离的DOM节点)
对于jQuery 1.4, .before()
和.after()
同时也会对分离的DOM元素有效。例如,下面的代码:
1
|
|
结果是一个包含一个div和一个段落的JQuery集合。因此,我们可以更进一步操作这个集合,即使在将它插入document之前。
1
2
3
4
|
|
结果是下面的代码被插到</body>
标签之前:
1
2
|
|
Passing a Function(传递一个函数)
从jQuery 1.4开始, .after()
允许我们传入一个函数,该函数返回要被插入的元素。
1
2
3
|
|
上面的代码在每个段落后插入一个<div>
,<div>
里面是该段落的class名称。
Additional Arguments(额外的参数)
和其他添加内容的方法类似, 如.prepend()
和 .before()
, .after()
还支持传递输入多个参数。 支持的输入包括DOM元素,jQuery对象,HTML字符串,DOM元素的数组。
例如,下面将插入两个新的<div<和现有的<div<到第一个段落后面:
1
2
3
4
5
|
|
.after()
可以接受任何数量的额外的参数,所以上面的例子中,也可以将三个独立的 <div> 分别作为参数传给该方法,就像这样$('p').first().after($newdiv1, newdiv2, existingdiv1)
。参数的类型和数量,将在很大程度上取决于你是如何选择元素的。
例子:
Example: 在所有的段落后插入一些HTML。
1
2
3
4
5
6
7
8
9
10
11
12
|
|
Example: 在所有的段落后插入一个DOM元素。
1
2
3
4
5
6
7
8
9
10
11
12
|
|
Example: 在所有段落后插入一个jQuery对象。
1
2
3
4
5
6
7
8
9
10
11
12
|
|
转载请注明:悠然品鉴 » jQuery .after() 用法 手册 | 示例代码