.wrapInner()

分類：操作 > DOM 插入，周圍

.wrapInner( wrappingElement )傳回：jQuery

說明：將 HTML 結構包覆在符合元素集合中每個元素的內容周圍。

.wrapInner() 函式可以接受任何字串或物件，這些字串或物件可以傳遞給 $() 工廠函式，以指定 DOM 結構。此結構可以巢狀多層，但只應包含一個最內層元素。此結構將會包覆在匹配元素集合中每個元素的內容周圍。

考慮以下 HTML

1
2
3
4
 
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

使用 .wrapInner()，我們可以插入一個 HTML 結構在每個內層 <div> 元素的內容周圍，如下所示

1
 
$( ".inner" ).wrapInner( "<div class='new'></div>");

新的 <div> 元素會動態建立並新增到 DOM 中。結果是一個新的 <div>，包覆在每個匹配元素的內容周圍

1
2
3
4
5
6
7
8
 
<div class="container">
  <div class="inner">
    <div class="new">Hello</div>
  </div>
  <div class="inner">
    <div class="new">Goodbye</div>
  </div>
</div>

此方法的第二個版本允許我們指定一個回呼函式。此回呼函式會針對每個匹配元素呼叫一次；它應傳回一個 DOM 元素、jQuery 物件或 HTML 片段，用於包覆對應元素的內容。例如

1
2
3
 
$( ".inner" ).wrapInner(function() {
  return "<div class='" + this.nodeValue + "'></div>";
});

這將導致每個 <div> 都有對應於其包覆文字的類別

1
2
3
4
5
6
7
8
 
<div class="container">
  <div class="inner">
    <div class="Hello">Hello</div>
  </div>
  <div class="inner">
    <div class="Goodbye">Goodbye</div>
  </div>
</div>

注意：當將選擇器字串傳遞給 .wrapInner() 函式時，預期的輸入是格式良好的 HTML，且標籤正確關閉。有效輸入範例包括

1
2
 
$( elem ).wrapInner( "<div class='test'></div>" );
$( elem ).wrapInner( "<div class=\"test\"></div>" );

範例

選取所有段落，並在每個段落的內容周圍包覆一個粗體標籤。

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-3.7.0.js"></script>
</head>
<body>
 
<p>Hello</p>
<p>cruel</p>
<p>World</p>
 
<script>
$( "p" ).wrapInner( "<b></b>" );
</script>
 
</body>
</html>

示範

在 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-3.7.0.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>

示範

選取所有段落，並在每個段落的內容周圍包覆一個粗體標籤。

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-3.7.0.js"></script>
</head>
<body>
 
<p>Hello</p>
<p>cruel</p>
<p>World</p>
 
<script>
$( "p" ).wrapInner( document.createElement( "b" ) );
</script>
 
</body>
</html>

示範

選取所有段落，並在每個段落的內容周圍包覆一個 jQuery 物件。

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-3.7.0.js"></script>
</head>
<body>
 
<p>Hello</p>
<p>cruel</p>
<p>World</p>
 
<script>
$( "p" ).wrapInner( $( "<span class='red'></span>" ) );
</script>
 
</body>
</html>

示範