首页 > 建站教程 > JS、jQ、TS >  jQuery wrap()方法详解,wrap、wrapAll、wrapInner区别正文

jQuery wrap()方法详解,wrap、wrapAll、wrapInner区别

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

语法格式:
$(selector).wrap(wrapper)
运行下面的代码查看效果:


提示:您可以先修改部分代码再运行


wrap、wrapAll、wrapInner区别

原代码:
<ul>
  <li title="苹果">苹果</li>
  <li title="橘子">橘子</li>
  <li title="菠萝">菠萝</li>
</ul>
1、jQuery wrap方法将为每一个选择器都添加:
<script>
$("li").wrap("<div></div>");
</script>
<ul>
  <div><li title="苹果">苹果</li></div>
  <div><li title="橘子">橘子</li></div>
  <div><li title="菠萝">菠萝</li></div>
</ul>
2、jQuery wrapAll将在所有选中的选择器最外面添加:
<script>
$("li").wrapAll("<div></div>");
</script>
<ul>
  <div>
    <li title="苹果">苹果</li>
    <li title="橘子">橘子</li>
    <li title="菠萝">菠萝</li>
  </div>
</ul>
3、jQuery wrapInner 将为选择器的内容添加:
<script>
$("li").wrapInner("<div></div>");
</script>
<ul>
  <li title="苹果"><div>苹果</div></li>
  <li title="橘子"><div>橘子</div></li>
  <li title="菠萝"><div>菠萝</div></li>
</ul>