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,一经查实,立即删除!

相关文章

usleep函数

usleep功能把进程挂起一段时间&#xff0c; 单位是微秒&#xff08;百万分之一秒&#xff09;&#xff1b; 头文件&#xff1a; unistd.h 语法: void usleep(int micro_seconds); 返回值: 无 内容说明&#xff1a;本函数可暂时使程序停止执行。参数 micro_seconds 为要暂停的微…

限制Xamarin获取图片的大小

限制Xamarin获取图片的大小在App开发中&#xff0c;经常会使用网络图片。因为这样不仅可以减少App的大小&#xff0c;还可以动态更新图片。但是手机使用网络环境千差万别。当网络环境不是理想的情况下&#xff0c;加载网络图片就是一个棘手的问题了。为了避免长时间加载图片影响…

Linux应用开发自学之路

前言 在 「关于我 」那篇博文里&#xff0c;朋友们应该知道了我不是科班出身&#xff0c;是由机械强行转行到Linux应用开发方向。下面我就详细向大家介绍自己这一路上的转行历程&#xff0c;希望对大家有所启发。 我是学机械专业的&#xff0c;对于机械专业我还是很感兴趣&…

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进行通信&…

internet网络 checksum校验和计算方法

http://hi.baidu.com/%CE%C4%B3%AD%B9%AB/blog/item/7d9a4e08f82d72b32eddd4cb.html

最有效的创建大数据模型的6个技巧

数据建模是一门复杂的科学&#xff0c;涉及组织企业的数据以适应业务流程的需求。它需要设计逻辑关系&#xff0c;以便数据可以相互关联&#xff0c;并支持业务。然后将逻辑设计转换成物理模型&#xff0c;该物理模型由存储数据的存储设备、数据库和文件组成。 历史上&#xff…

【转】Castle Windsor之组件注册

【转】Castle Windsor之组件注册 注册方式较多&#xff0c;大体有这么几种&#xff0c;学习得比较粗浅&#xff0c;先记录&#xff1a;1、逐个注册组件即对每个接口通过代码指定其实现类&#xff0c;代码&#xff1a;container.Register(Component.For<IMyService>() //接…

Verilog 补码加法溢出判断及处理

补码加法运算溢出判断三种方法&#xff1a; 一、符号位判断 Xf、Yf分别两个数的符号位,Zf为运算结果符号位。 当Xf Yf 0&#xff08;两数同为正&#xff09;,而Zf1(结果为负)时,负溢出&#xff1b;当出现Xf Yf 1&#xff08;两数同为负&#xff09;,而Zf0&#xff08;结果为…

Android绘制(三):Path结合属性动画, 让图标动起来!

Android绘制(一):来用shape绘出想要的图形吧! Android绘制(二):来用Path绘出想要的图形吧! 目录 效果图前言绘制属性动画最后效果图 不废话, 直接上效果图, 感兴趣再看下去. 其实不单单是效果图演示的, 运用熟练的话各种图标之间都是可以切换的. 前言 之前的文章也说了, path还…

{{view 视图层}}微信小程序

微信小程序 view 视图层//自学 1.数据绑定 数据绑定WXML中的动态数据均来自对应Page的data。 简单绑定数据绑定使用"Mustache"语法&#xff08;双大括号&#xff09;将变量包起来&#xff0c;可以作用于&#xff1a; 内容<view> {{ message }} </view>Pa…

CMOS图像传感器——概述

一、概述 图像传感器是把光学图像信息转换成电信号的器件。图像传感器是随着电视技术在20世纪30年代发展起来的,早期图像传感器技术的最重要贡献在于建立了扫描(Scan)的概念,用扫描的方法把二维空间平面上的光电信息离散成行(Line)和帧(Frame),然后按空间顺序读出形成…

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…

[LeetCode_5] Longest Palindromic Substring

LeetCode: 5. Longest Palindromic Substring class Solution { public: //动态规划算法string longestPalindrome(string s) {int n s.length();int longestBegin 0;int maxLen 1;bool table[1000][1000] {false};for (int i 0; i < n; i) {table[i][i] true;}//对角…

冒泡排序java

一、最简单粗暴的排序 思想为&#xff1a;让每一个关键字都和它后边的每一个关键字比较&#xff0c; 如果大则交换&#xff0c;这样第一个位置的关键字在一次循环后一定变为最小值。 1 package demo01;2 3 class BubbleSort01 {4 public static void main(String[] args) {…

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

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

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

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