DOM包裹wrap()方法

DOM包裹wrap()方法

如果要将元素用其他元素包裹起来,也就是给它增加一个父元素,针对这样的处理,JQuery提供了一个wrap方法

.wrap( wrappingElement ):在集合中匹配的每个元素周围包裹一个HTML结构

简单的看一段代码:

<p>p元素</p>

给p元素增加一个div包裹

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

最后的结构,p元素增加了一个父div的结构

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

.wrap( function ) :一个回调函数,返回用于包裹匹配元素的 HTML 内容或 jQuery 对象

使用后的效果与直接传递参数是一样,只不过可以把代码写在函数体内部,写法不同而已

以第一个案例为例:

$('p').wrap(function() {return '<div></div>';   //与第一种类似,只是写法不一样
})

注意:

.wrap()函数可以接受任何字符串或对象,可以传递给$()工厂函数来指定一个DOM结构。这种结构可以嵌套了好几层深,但应该只包含一个核心的元素。每个匹配的元素都会被这种结构包裹。该方法返回原始的元素集,以便之后使用链式方法

 

DOM包裹unwrap()方法

我们可以通过wrap方法给选中元素增加一个包裹的父元素。相反,如果删除选中元素的父元素要如何处理 ?

jQuery提供了一个unwrap()方法 ,作用与wrap方法是相反的。将匹配元素集合的父级元素删除,保留自身(和兄弟元素,如果存在)在原来的位置。

看一段简单案例:

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

我要删除这段代码中的div,一般常规的方法会直接通过remove或者empty方法

$('div').remove();

但是如果我还要保留内部元素p,这样就意味着需要多做很多处理,步骤相对要麻烦很多,为了更便捷,jQuery提供了unwrap方法很方便的处理了这个问题

$('p').unwrap();

找到p元素,然后调用unwrap方法,这样只会删除父辈div元素了

结果:

<p>p元素</p>

这个方法比较简单,也不接受任何参数,注意参考下案例的使用即可

 

DOM包裹wrapAll()方法

wrap是针对单个dom元素处理,如果要将集合中的元素用其他元素包裹起来,也就是给他们增加一个父元素,针对这样的处理,JQuery提供了一个wrapAll方法

.wrapAll( wrappingElement ):给集合中匹配的元素增加一个外面包裹HTML结构

简单的看一段代码:

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

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

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

最后的结构,2个P元素都增加了一个父div的结构

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

.wrapAll( function ) :一个回调函数,返回用于包裹匹配元素的 HTML 内容或 jQuery 对象

通过回调的方式可以单独处理每一个元素

以上面案例为例,

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

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

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

注意:

.wrapAll()函数可以接受任何字符串或对象,可以传递给$()工厂函数来指定一个DOM结构。这种结构可以嵌套多层,但是最内层只能有一个元素。所有匹配元素将会被当作是一个整体,在这个整体的外部用指定的 HTML 结构进行包裹。

 

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 标签应该是被正确关闭的。

转载于:https://www.cnblogs.com/liaolijun/p/7326251.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/253798.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Verdi 基础教程

一、Verdi 功能 查看设计debugVerdi不能自己产生波形 二、Verdi使用流程 1、Verdi环境配置 .bashrc中配置 export Verdi_HOME$Synopsys_Dir/Verdi2015 #export NOVAS_HOME$Synopsys_Dir/Verdi2015 export PATH$Verdi_HOME/bin:$PATH export LD_LIBRARY_PATH"/opt/Syno…

ida和idr机制分析(盘符分配机制)

内核ida和idr机制分析&#xff08;盘符分配机制&#xff09; ida和idr的机制在我个人看来&#xff0c;是内核管理整数资源的一种方法。在内核中&#xff0c;许多地方都用到了该结构&#xff08;例如class的id&#xff0c;disk的id&#xff09;&#xff0c;更直观的说&#xff0…

MIPI CSI-2学习

CSI&#xff08;Camera Serial Interface&#xff09;定义了摄像头外设与主机控制器之间的接口&#xff0c;旨在确定摄像头与主机控制器在移动应用中的标准。 关键词描述 缩写解释CCICamera Control Interface&#xff08;物理层组件&#xff0c;通常使用I2C或I3C进行通信&…

nand flash坏块管理OOB,BBT,ECC

0.NAND的操作管理方式 NAND FLASH的管理方式&#xff1a;以三星FLASH为例&#xff0c;一片Nand flash为一个设备(device)&#xff0c;1 (Device) xxxx (Blocks)&#xff0c;1 (Block) xxxx (Pages)&#xff0c;1(Page) 528 (Bytes) 数据块大小(512Bytes) OOB 块大小(16Byte…

小白学git2

你已经在本地创建了一个Git仓库后&#xff0c;又想在GitHub创建一个Git仓库&#xff0c;并且让这两个仓库进行远程同步&#xff0c;这样&#xff0c;GitHub上的仓库既可以作为备份&#xff0c;又可以让其他人通过该仓库来协作&#xff0c;真是一举多得。 首先&#xff0c;登陆G…

CMOS图像传感器——工作原理

一、像素阵列结构 一般像素阵列是由水平方向的行( Row ) 和垂直方向的列(Column)正交排列构成的。像素排列的最基本设计原则是:摄像器件像素排列的坐标,必须在显示的时候能够准确地还原在图像原来的相对位置上。在大多数情况下,每个像素中心线在行的方向和列的方向,即…

追寻终极数据库 - 事务/分析混合处理系统的交付挑战 (3)

挑战&#xff1a;支持多个存储引擎 以下内容并不是新发现&#xff1a;行优化存储适用于OLTP和运营工作负载&#xff0c;而列存储适用于BI和分析工作负载。频繁写入的工作负载适用于行式存储。对Hadoop而言&#xff0c;Hbase适合低延迟工作负载&#xff0c;列式ORC文件或Parquet…

异步FIFO设计(Verilog)

FIFO&#xff08;First In First Out&#xff09;是异步数据传输时经常使用的存储器。该存储器的特点是数据先进先出&#xff08;后进后出&#xff09;。其实&#xff0c;多位宽数据的异步传输问题&#xff0c;无论是从快时钟到慢时钟域&#xff0c;还是从慢时钟到快时钟域&…

python中RabbitMQ的使用(路由键模糊匹配)

路由键模糊匹配 使用正则表达式进行匹配。其中“#”表示所有、全部的意思&#xff1b;“*”只匹配到一个词。 匹配规则&#xff1a; 路由键&#xff1a;routings [ happy.work, happy.life , happy.work.teacher, sad.work, sad.life, sad.work.teacher ] "#"&am…

时钟切换处理(Verilog)

随着各种应用场景的限制&#xff0c;芯片在运行时往往需要在不同的应用下切换不同的时钟源&#xff0c;例如低功耗和高性能模式就分别需要低频率和高频率的时钟。两个时钟源有可能是同源且同步的&#xff0c;也有可能是不相关的。直接使用选择逻辑进行时钟切换大概率会导致分频…

Angular Elements 组件在非angular 页面中使用的DEMO

2019独角兽企业重金招聘Python工程师标准>>> 一、Angular Elements 介绍 Angular Elements 是伴随Angular6.0一起推出的新技术。它借助Chrome浏览器的ShadowDom API&#xff0c;实现一种自定义组件。 这种组件可以用Angular普通组件的开发技术进行编写&#xff0c;…

卢卡斯定理

卢卡斯定理:解决一类组合数取模问题 A、B是非负整数&#xff0c;p是质数。AB写成p进制&#xff1a;Aa[n]a[n-1]...a[0]&#xff0c;Bb[n]b[n-1]...b[0]。 则组合数C(A,B)与C(a[n],b[n])*C(a[n-1],b[n-1])*...*C(a[0],b[0]) modp同余 即&#xff1a;Lucas(n,m,p)c(n%p,m%p)*Luc…

loadrunner中对https证书的配置

1、准备好网站的证书&#xff0c;一般证书是cer格式&#xff1b; 2、因为loadrunner只支持pem格式的证书&#xff0c;所以要将证书转换格式&#xff0c;利用openssl工具&#xff1b;&#xff08;或者直接让开发提供pem格式的证书&#xff09;3、得到pem格式的证书之后&#xff…

Datapath综合代码规范(Verilog)

一、一般准则 1、有符号数运算 利用类型“signed”完成有符号数运算&#xff0c;而不是用无符号数模拟有符号数运算。这样可以得到更好的QoR。在资源报告中检查操作数的类型和大小。 2、符号/零扩展 尽量不要手动扩展。verilog利用signed/unsigned会自动完成扩展。这样代码可…

CMOS 图像传感器——Skipping 和 Binning 模式

在通常的CMOS读取方式中&#xff0c;由于像素读取规模的差异&#xff0c;不同的分辨率对应不同的帧率。在通道带宽固定的前提下&#xff0c;想要提高帧率就要考虑是否需要缩小视野&#xff08;外圈裁切&#xff09;。若不希望视野缩小&#xff0c;需要减少采样的分辨率。 常用的…

APB协议学习

APB(Advanced Peripheral Bus) 1、APB的概述与特点 APB主要用于低带宽的周边外设之间的连接&#xff0c;例如UART、1284等&#xff0c;它的总线架构不像AHB支持多个主模块&#xff0c;在APB里面唯一的主模块就是APB 桥。其特性包括&#xff1a;两个时钟周期传输&#xff1b;无…

私有协议栈开发

通信协议从广义上区分&#xff0c;可以分为公有协议和私有协议。由于私有协议的灵活性&#xff0c;它往往会在某个公司或者组织内部使用&#xff0c;按需定制&#xff0c;也因为如此&#xff0c;升级起来会非常方便&#xff0c;灵活性好。绝大多数的私有协议传输层都基于TCP/IP…

数字图像处理——2D降噪

图像降噪处理主要分为2D&#xff08;空域&#xff09;与3D降噪&#xff08;时域/多帧&#xff09;&#xff0c;而2D降噪由于相关的实现算法丰富&#xff0c;效果各异&#xff0c;有着丰富的研究价值。理解2D降噪算法的流程&#xff0c;也对其他的增强算法有很大的帮助&#xff…

项目开发(Require + E.js)

最近在做的几个项目&#xff0c;分别用了不同的框架跟方式&#xff0c;有个H5的项目&#xff0c;用了vue框架&#xff0c; 这个项目我还没有正式加入进去&#xff0c; 等手头的这个项目完成就可以去搞vue了&#xff0c; 现在手头的这个项目是一个招聘的项目&#xff0c; 用到了…