在每个匹配元素的外部插入新元素

最新推荐文章于 2015-11-24 18:03:00 发布
最新推荐文章于 2015-11-24 18:03:00 发布
阅读量495 收藏
点赞数
分类专栏： jQuery 文章标签： jquery jQuery向匹配元素的外部插入新元素-
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liuxingyuzzp/article/details/17439719
版权

一、方法

         wrap         ：把所有匹配的元素，用其他元素的结构化包裹起来

      wrapAll      : 把所有匹配的元素，用单个元素包裹起来

      wrapInner  : 把匹配元素的子类用html结构包裹起来


二、实例

（1）wrap

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../jquery-2.0.0/jquery-2.0.0.js"></script>
<script type="text/javascript">
    $(function() {
        $("div a").wrap("<div id='id'></div>");
    });
</script>
</head>
<body>
    <div>
        <a>liuxingyu</a> <a>liuxingyu</a> <a>liuxingyu</a> <a>liuxingyu</a>
    </div>
</body>
</html>

        firebug显示结果：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
   <title>Insert title here</title>
   <script src="../jquery-2.0.0/jquery-2.0.0.js" type="text/javascript">
   <script type="text/javascript">
</head>
<body>
 <div>
  <div id="id">
   <a>liuxingyu</a>
  </div>
  <div id="id">
   <a>liuxingyu</a>
  </div>
  <div id="id">
   <a>liuxingyu</a>
  </div>
  <div id="id">
   <a>liuxingyu</a>
  </div>
 </div>
</body>
</html>
（2）wrapAll
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../jquery-2.0.0/jquery-2.0.0.js"></script>
<script type="text/javascript">
    $(function() {
        $("div a").wrapAll("<div id='id'></div>");
    });
</script>
</head>
<body>
    <div>
        <a>liuxingyu</a> <a>liuxingyu</a> <a>liuxingyu</a> <a>liuxingyu</a>
    </div>
</body>
</html>
firebug显示结果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../jquery-2.0.0/jquery-2.0.0.js" type="text/javascript">
    <script type="text/javascript">
    $(function() {
        $("div a").wrapAll("<div id='id'></div>");
    });
</script>
</head>
<body>
    <div>
        <div id="id">
            <a>liuxingyu</a> <a>liuxingyu</a> <a>liuxingyu</a> <a>liuxingyu</a>
        </div>
    </div>
</body>
</html>
（3）wrapInner
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../jquery-2.0.0/jquery-2.0.0.js" type="text/javascript">
    <script type="text/javascript">
    $(function() {
        $("div").wrapInner("<div id='id'></div>");
    });
</script>
</head>
<body>
    <div>
       <a>liuxingyu</a> <a>liuxingyu</a> <a>liuxingyu</a> <a>liuxingyu</a>
    </div>
</body>
</html>
firebug显示结果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../jquery-2.0.0/jquery-2.0.0.js" type="text/javascript">
    <script type="text/javascript">
    $(function() {
        $("div").wrapInner("<div id='id'></div>");
    });
</script>
</head>
<body>
    <div>
        <div id="id">
            <a>liuxingyu</a> <a>liuxingyu</a> <a>liuxingyu</a> <a>liuxingyu</a>
        </div>
    </div>
</body>
</html>

流星雨zzp
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在每个匹配元素的外部插入新元素的方法
12-12
一、方法 wrap ：把所有匹配的元素，用其他元素的结构化包裹起来 wrapAll : 把所有匹配的元素，用单个元素包裹起来 wrapInner : 把匹配元素的子类用html结构包裹起来 二、实例 （1）wrap 代码如下: <!DOCTYPE html> <html> <head> <meta charset=”UTF-8″> <title>Insert title here</title> [removed][removed] <script type=”text/j
js数组如何每隔几个元素添加一个元素
qian_an_hua_li的博客
11-14 6779
js数组如何每隔几个元素添加一个元素 var typeData = []; for(var i=0,len=types.length;i&lt;len;i+=3){ typeData.push(types.slice(i,i+3)); } typeData.forEach(item =&gt; { ...
jQuery-1.9.1源码分析系列（十一） DOM操作
ajb11683的博客
11-24 114
　　DOM操作包括append、prepend、before、after、replaceWith、appendTo、prependTo、insertBefore、insertAfter、replaceAll。其核心处理函数是domManip。 　　DOM操作函数中后五种方法使用的依然是前面五种方法，源码 jQuery.each({ appendTo: "ap...
jQuery向匹配元素中插入新元素
流星雨
12-19 838
一、方法介绍           append        ：向每个匹配的元素增加内容。           prepend        : 向每个匹配的元素内前置内容。           appendTo     : 把所有匹配的元素追加到另一个指定的元素元素集合中           prependTo    : 把所有匹配的元素前置到指定的元素的元素集合中 （1）ap
jQuery和JavaScript节点插入元素的方法对比
11-28
5. `after()`：此方法会在每个匹配元素之后插入内容，如`$("div").after("这是after()方法添加的内容</p>")`会在每个`<div>`元素后面插入一个`<p>`元素。 6. `before()`：它会在每个匹配元素之前插入内容，例如`$(...
数据结构-数据集合和搜索.pdf
07-11
集合的一个关键特性是元素的唯一性，即每个元素在集合中只出现一次。然而，多重集允许元素重复出现，例如{1,1,2,3}。 集合可以有多种表示方式，包括线性表、搜索树、跳表和散列表。线性表是最基础的表示形式，它...
2019年前端开发面试题整理.pdf
11-26
- `map()`：遍历数组中的每个元素，对每个元素执行提供的函数，并返回新数组，包含函数返回的值。 - `forEach()`：遍历数组，执行提供的函数，但不能中途停止，除非通过`try/catch`抛出错误。 - `filter()`：根据...
项目部年度员工培训计划.docx
07-13
项目部年度员工培训计划.docx
c的项目案例.txtc的项目案例.txtc的项目案例.txtc的项目案例.txt
07-13
cc的项目案例.txtc的项目案例.txtc的项目案例.txtc的项目案例.txtc的项目案例.txtc的项目案例.txtc的项目案例.txtc的项目案例.txtc的项目案例.txtc的项目案例.txtc的项目案例.txtc的项目案例.txtc的项目案例.txtc的项目案例.txtc的项目案例.txtc的项目案例.txtc的项目案例.txtc的项目案例.txtc的项目案例.txtc的项目案例.txtc的项目案例.txtc的项目案例.txtc的项目案例.txtc的项目案例.txtc的项目案例.txtc的项目案例.txtc的项目案例.txtc的项目案例.txtc的项目案例.txtc的项目案例.txtc的项目案例.txtc的项目案例.txtc的项目案例.txtc的项目案例.txtc的项目案例.txtc的项目案例.txtc的项目案例.txtc的项目案例.txtc的项目案例.txtc的项目案例.txtc的项目案例.txtc的项目案例.txtc的项目案例.txtc的项目案例.txtc的项目案例.txtc的项目案例.txtc的项目案例.txtc的项目案例.txtc的项目案例.txtc的项目案例.tx
营销策划 -猫人内衣品牌升级诊断方案.pptx
07-13
营销策划 -猫人内衣品牌升级诊断方案.pptx
项目施工日志.docx
07-13
项目施工日志.docx
决明降脂胶囊PPT20220608.ppt
07-13
决明降脂胶囊PPT20220608.ppt
族谱管理软件通用版V1.0
07-13
族谱管理软件功能介绍： 1、登录软件后自行录入族人相关资料、录入资料后可进行增删改查操作。 2、族人查询模块支持Excek批量导入、导出数据功能。 3、族人查询模块支持选中指定族人资料后、右键可以快速添加对应的父亲、儿子、兄弟、妻子资料。 4、族人图谱展示录入系统的所有族人关系图、清晰方便的展示对应的父子关系，包括零散的不包含父亲数据的节点数据。 5、族人图谱支持右键快速查询对应的所有直系祖宗数据、所有的直系后辈关系数据，并允许重新排版和导出图片。
公司员工转正答辩PPT模板
07-13
【作品名称】：公司员工转正答辩PPT模板 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
IMC面试葵花宝典.docx
最新发布
07-13
呼叫建立流程（白话版） 1.首先主叫 UE 附着至 eNB 2.建立 RRC 连接 3.主叫发起服务请求，建立 ERAB 承载（QCI5） 4.在主叫用户的默认承载完全建立后，主叫发起 SIP 呼叫（首先是 Register 信令)，PGW 与 PCC 通过 DPI 检测出业务流中含高优先级的语音业务（因为数据流中含 SIP 协议）。则发起专用承载建立过程。 5.专用承载建立成功，PGW 与 UE 之间将这路 SDF 转移到这个专用承载上。 6.PGW 将带 SIP 呼叫的 IP 发出去，这个业务流会被转给 IMS 网络，然后就是 IMS 的注册流程，之间有四条 SIP 信令（主叫与 IMS 核心网之间),在主叫侧 EPS 网络中是在专用承载上传递的。 7.主叫用户呼被叫，用 SIP invite，这个信令在主叫侧 EPS 中也是在专用承载上传递的。IMS 网络会把呼叫信令路由到被叫侧 EPS 网络，即寻呼被叫使被叫 UE 与 PGW 之间建立专用承载（PGW 也有 DPI 检测的过程）， 8.在被叫侧专用承载建立完成后，SIP 呼叫信令在主叫侧、IMS 核心网、被叫侧
营销策划 -洽洽小黄袋每日坚果品牌备考季营销传播.pptx
07-13
营销策划 -洽洽小黄袋每日坚果品牌备考季营销传播.pptx
基于Springboot的教学辅助系统论文
07-13
论文摘要：互联网发展至今，其理论与技术均已趋于成熟，并广泛渗透到社会的各个领域。它使得信息能够通过网络迅速传播，结合信息管理工具，可以有效地为人们提供服务。针对信息管理中的混乱、高出错率、安全性不足、劳动强度大以及费时费力等问题，采用教学辅助系统进行管理，能够促使信息管理更加科学与规范。 该教学辅助系统在Eclipse环境中，采用Java语言进行编码，并使用Mysql数据库创建数据表以存储系统产生的数据。系统能够提供信息显示及相应的服务功能。 总之，教学辅助系统实现了信息的集中管理，具有保密性强、效率高、存储空间大、成本低等优点。它有助于降低信息管理成本，推动信息管理的计算机化进程。
现代通信组网案例分析.docx
07-13
现代通信网络的组网案例分析可以帮助理解当前通信技术在实际应用中的设计和实现。以下是一个现代通信组网案例的详细分析，涵盖了设计目标、技术选择、实施步骤和结果分析。
在单链表最后一个元素后插入新元素c++代码
05-11
假设单链表的结点定义为： ```c++ struct ListNode { int val; ListNode *next; ListNode(int x) : val(x), next(NULL) {} }; ``` 则在单链表最后一个元素后插入新元素的代码可以如下实现： ```c++ void insertAtTail(ListNode* head, int val) { ListNode* newNode = new ListNode(val); if (head == NULL) { head = newNode; return; } ListNode* cur = head; while (cur->next != NULL) { cur = cur->next; } cur->next = newNode; } ``` 这里的思路是，先创建一个新节点，然后遍历链表找到最后一个节点，将最后一个节点的 next 指针指向新节点即可。需要注意的是，如果链表为空，则直接将新节点作为头结点。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值