jQuery中wrap、wrapAll和wrapInner用法以及區別
阿新 • • 發佈:2018-12-23
wrap、wrapAll和wrapInner都是包裹節點,但是在使用的時候總是容易混淆,不太明白具體的區別。簡單的來說;
2、$("li").wrap("<div></div>");
3、$("li").wrapAll("<div></div>");
4、$("li").wrapInner("<div></div>");
- wrap(): 將所有匹配元素單獨包裹起來
- wrapAll(): 將所有匹配元素一起包裹起來
- wrapInner(): 將所有匹配元素的子內容包裹起來
這麼官方的解釋是不是腦袋還是雲裡霧裡的呢?不用擔心,看了下面這幾個例子你就定能搞定~
1、原始碼如下:
<ul>
<li>蘋果</li>
<li>橘子</li>
<li>菠蘿</li>
</ul>
2、$("li").wrap("<div></div>");
每一個選擇器都新增
</pre><pre name="code" class="html"><ul> <div><li>蘋果</li></div> <div><li>橘子</li></div> <div><li>菠蘿</li></div> </ul>
3、$("li").wrapAll("<div></div>");
在所有選中的選擇器最外面新增
<ul>
<div>
<li>蘋果</li>
<li>橘子</li>
<li>菠蘿</li>
</div>
</ul>
4、$("li").wrapInner("<div></div>");
為選擇器的內容新增
<pre name="code" class="html"><ul> <li><div>蘋果</div></li> <li><div>橘子</div></li> <li><div>菠蘿</div></li> </ul>