描述: 在每个匹配的元素外层包上一个html元素。
-
添加的版本: 1.0.wrap( wrappingElement )
-
wrappingElement类型: String, Selector, Element, jQuery一个HTML片段,选择表达式,jQuery对象,或者DOM元素,用来包在匹配元素的外层。
-
-
添加的版本: 1.4.wrap( function(index) )
-
function(index)类型: Function()回调函数,返回用于包裹匹配元素的 HTML 内容或 jQuery 对象。index 参数表示匹配元素在集合中的集合。该函数内的
this
指向集合中的当前元素。
-
.wrap()
函数可以接受任何字符串或对象,可以传递给$()
工厂函数来指定一个DOM结构。这种结构可以嵌套了好几层深,但应该只包含一个核心的元素。每个匹配的元素都会被这种结构包裹。该方法返回原始的元素集,以便之后使用链式方法。
参数可以是string或者对象只要能形成DOM结构,可以是嵌套的,但是结构只包含一个最里层元素。这个结构会包在每个匹配元素外层。该方法返回没被包裹过的元素的jQuery对象用来链接其他函数。
考虑下面的HTML:
1
2
3
4
|
|
使用.wrap()
, 我们可以在inner <div>
外层插入一个HTML结构。
1
|
|
结果如下:
1
2
3
4
5
6
7
8
|
|
该方法的第二种用法允许我们用函数做参数,改函数返回一个DOM元素,jQuery对象,或者HTML片段,用来包住匹配元素。例如:
1
2
3
|
|
结果如下:
1
2
3
4
5
6
7
8
|
|
例子:
Example: 在所有段落外包一个div
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
|
Example: Wraps a newly created tree of objects around the spans. Notice anything in between the spans gets left out like the <strong> (red text) in this example. Even the white space between spans is left out. Click View Source to see the original html.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
|
Example: Wrap a new div around all of the paragraphs.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
|
Example: Wrap a jQuery object double depth div around all of the paragraphs. Notice it doesn’t move the object but just clones it to wrap around its target.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
|
转载请注明:悠然品鉴 » jQuery .wrap() 用法 手册 | 示例代码