首页 > 建站教程 > 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>

TAGS: jQuery  wrap  方法  详解  、  wrapAll  wrapInner  区别