F2E

jQuery 3種 利用其他元素包覆元素（wrap、wrapAll、wrapInner）

.wrap() 包覆各個元素

1
2
3
$(function() {
  $('p').wrap('<div class="wp"></div>')
})
1
2
3
4
5
6
7
8
9
<!-- 執行前 -->
<p>蛋糕</p>
<p>泡芙</p>
<p>布丁</p>

<!-- 執行後 -->
<div class="wp"><p>蛋糕</p></div>
<div class="wp"><p>泡芙</p></div>
<div class="wp"><p>布丁</p></div>

.wrapAll() 包覆所有元素

1
2
3
$(function() {
  $('p').wrapAll('<div class="wp"></div>')
})
1
2
3
4
5
6
7
8
9
10
11
<!-- 執行前 -->
<p>蛋糕</p>
<p>泡芙</p>
<p>布丁</p>

<!-- 執行後 -->
<div class="wp">
  <p>蛋糕</p>
  <p>泡芙</p>
  <p>布丁</p>
</div>

如果夾雜其他元素，這些元素會被排除在外。請看下面範例：

1
2
3
$(function() {
  $('p').wrapAll('<div class="wp"></div>')
})
1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- 執行前 -->
<p>蛋糕</p>
<p>泡芙</p>
<a href="https://www.google.com.tw/">google</a>
<p>布丁</p>

<!-- 執行後 -->
<div class="wp">
  <p>蛋糕</p>
  <p>泡芙</p>
  <p>布丁</p>
</div>
<a href="https://www.google.com.tw/">google</a>

.wrapInner() 包裝元素底下的內容

1
2
3
$(function() {
  $('p').wrapInner('<div class="wp"></div>')
})
1
2
3
4
5
6
7
8
9
<!-- 執行前 -->
<p>蛋糕</p>
<p>泡芙</p>
<p>布丁</p>

<!-- 執行後 -->
<p><div class="wp">蛋糕</div></p>
<p><div class="wp">泡芙</div></p>
<p><div class="wp">布丁</div></p>