jquery中wrap、wrapAll、wrapInner

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>

		

<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></strong>")

结果：

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

3、$("p").wrapAll("<strong></strong>");

结果

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

4、$("p").wrapInner("<strong></strong>");

结果