1. 程式人生 > >jQuery中wrap、wrapAll和wrapInner用法以及區別

jQuery中wrap、wrapAll和wrapInner用法以及區別

wrap、wrapAll和wrapInner都是包裹節點,但是在使用的時候總是容易混淆,不太明白具體的區別。簡單的來說;
  1. wrap(): 將所有匹配元素單獨包裹起來
  2. wrapAll(): 將所有匹配元素一起包裹起來
  3. 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>