Примеры для jQuery .wrapInner()


Selects all paragraphs and wraps a bold tag around each of its contents.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>wrapInner demo</title>
<style>
p {
background: #bbf;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
<script>
$( "p" ).wrapInner( "<b></b>" );
</script>
</body>
</html>

Демонстрация:

Wraps a newly created tree of objects around the inside of the body.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>wrapInner demo</title>
<style>
div {
border: 2px green solid;
margin: 2px;
padding: 2px;
}
p {
background: yellow;
margin: 2px;
padding: 2px;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
Plain old text, or is it?
<script>
$( "body" ).wrapInner( "<div><div><p><em><b></b></em></p></div></div>" );
</script>
</body>
</html>

Демонстрация:

Selects all paragraphs and wraps a bold tag around each of its contents.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>wrapInner demo</title>
<style>
p {
background: #9f9;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
<script>
$( "p" ).wrapInner( document.createElement( "b" ) );
</script>
</body>
</html>

Демонстрация:

Selects all paragraphs and wraps a jQuery object around each of its contents.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>wrapInner demo</title>
<style>
p {
background: #9f9;
}
.red {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
<script>
$( "p" ).wrapInner( $( "<span class='red'></span>" ) );
</script>
</body>
</html>

Демонстрация: