jquery中wrap、wrapAll、wrapInner

时间：2015-7-30类别：Web前端

jquery中wrap、wrapAll、wrapInner

一、jquery中wrap、wrapAll、wrapInner的区别

1、wrap() 方法把每个被选元素放置在指定的 HTML 内容或元素中。

2、wrapAll() 在指定的 HTML 内容或元素中放置所有被选的元素。

3、wrapInner() 方法使用指定的 HTML 内容或元素，来包裹每个被选元素中的所有内容 (inner HTML)。

二、jquery中wrap、wrapAll、wrapInner实例

实例1

1、html页面数据


<ul>
  <li title='苹果'>苹果</li>
  <li title='橘子'>橘子</li>
  <li title='菠萝'>菠萝</li>
</ul>

2、$("li").wrap("<li></li>") //每一个选择器都添加

结果


<ul>
  <li><li title="苹果">苹果</li></li>
  <li><li title="橘子">橘子</li></li>
  <li><li title="菠萝">菠萝</li></li>
</ul>

3、$("li").wrapAll("<li></li>") //在所有选中的选择器最外面添加

结果


<ul>
  <li>
    <li title="苹果">苹果</li>
    <li title="橘子">橘子</li>
    <li title="菠萝">菠萝</li>
  </li>
</ul>

4、$("li").wrapInner("<li></li>") //为选择器的内容添加


<ul>
  <li title='苹果'><li>苹果</li></li>
  <li title='橘子'>><li>橘子</li></li>
  <li title='菠萝'>><li>菠萝</li></li>
</ul>

实例2

1、原始Html页面


<p>我是占位子的。</p>
<p>我是占位子的。</p>

2、$("p").wrap("")

结果：

从图中可以看出strong标签包围了每个匹配的p标签。

3、$("p").wrapAll("");

结果

strong标签把全部匹配的p标签一下子全都包围了。

4、$("p").wrapInner("");

结果

标签：