章节
问答
课签
笔记
评论
占位
占位

DOM包裹wrapInner()方法

如果要将合集中的元素内部所有的子元素用其他元素包裹起来,并当作指定元素的子元素,针对这样的处理,JQuery提供了一个wrapInner方法

.wrapInner( wrappingElement )给集合中匹配的元素的内部,增加包裹的HTML结构

听起来有点绕,可以用个简单的例子描述下,简单的看一段代码:

<div>p元素</div>
<div>p元素</div>

给所有元素增加一个p包裹

$('div').wrapInner('<p></p>')

最后的结构,匹配的di元素的内部元素被p给包裹了

<div>
    <p>p元素</p>
</div>
<div>
    <p>p元素</p>
</div>

.wrapInner( function ) 允许我们用一个callback函数做参数,每次遇到匹配元素时,该函数被执行,返回一个DOM元素,jQuery对象,或者HTML片段,用来包住匹配元素的内容

以上面案例为例,

$('div').wrapInner(function() {
    return '<p></p>'; 
})

以上的写法的结果如下,等同于第一种处理了

<div>
    <p>p元素</p>
</div>
<div>
    <p>p元素</p>
</div>

注意:

 当通过一个选择器字符串传递给.wrapInner() 函数,其参数应该是格式正确的 HTML,并且 HTML 标签应该是被正确关闭的。

任务

?不会了怎么办
||
1
2
<!DOCTYPE html>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

已采纳回答 / MWHx
在你执行删除方法后你把class="right"的标签删掉了,然而你的所有新增样式都需要写在 .right标签下才会生效,方法确实生效了,只不过不在 .right 下  (如果错误欢迎指正)

已采纳回答 / 程序小白zxcn
没有要求div中必须只要一个子元素,可以有多个;但是<p></p>标签会包裹所有的子元素,而不是每个子元素都有一个p标签包裹着,你可以自己试试,然后在浏览器上查看一下就知道了

最新回答 / qq_慕盖茨8053647
因为两个个onclick事件是分别给right1和left1的内部元素添加包裹标签比如<div class="right1">p元素</div>        <div class="right1">p元素</div>点击第一个按钮,给这段代码加外标<p></p>后就变成了<div class="right1"><p>p元素</p></div>        <div class=...

已采纳回答 / eq361
p元素为块元素,有默认外边距,a为行内元素,默认外边距为0

最新回答 / NullMoneyException
<...图片...>  虽然你的问题久远 但还是来回答下了  这不是包了吗

最赞回答 / 榴莲痴汉
p元素,自己占一行,跟div一个性质。a不会占行

已采纳回答 / wateryang
去掉“”双引号就可以了,加了双引号就不是一个jquery对象了。return “$('.left1').wrapInner('<p></p>')";//法一return $('.left1').wrapInner('<p></p>');//法一更正

最新回答 / 下小朋友_
我觉得是增加的这个P元素的外边距把盒子撑开了,把P的margin设置为0,这样就不会撑开了。

已采纳回答 / 泽拉斯的飞升之地
<...图片...>如图所示

最赞回答 / 瓜瓜工程师
需要return的时候,是因为执行功能函数要返回一个能用的上的结果,为后续程序来使用的。一般function(){}都是完成一个功能,做好一件事情之后总要返回一个结果来说明做的如何,结果如何!

已采纳回答 / 劫盎
wrapInner()是指将其内部的每个元素包裹(元素内部包裹)<p>    <div>p1</div></p><p>    <div>p2</div></p>wrap()指将其匹配的元素集合中的每个元素包裹(元素外部包裹)<div>    <p>p1</p></div></div>    <p>p2</p></div&g...

已采纳回答 / 奔驰的大葱
加了 wrapInner() 后 <p><div>p元素</div><p>   <a><div>a元素</div><a>  p和a本身是没有大小和宽度的概念的,p是文本标签,a是链接标签,不是块级标签,不是div table之类的, 所谓的大小和宽度也是根据里面的子元素来定的,除非在css里强制设置显示模块为块级,一般写css不会这样去写

已采纳回答 / 长空55
包裹之前<...图片...>包裹之后<...图片...>边框不变

已采纳回答 / ray1208
很简单,把on()改成one(),只执行一次就解绑。
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言