首页 > Web开发 > 详细

jQuery_DOM学习之------包裹元素的方法

时间:2017-11-08 14:05:48      阅读:195      评论:0      收藏:0      [点我收藏+]

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

简单的看一段代码:

<span>连接文字</span>

给span元素增加一个a包裹

$(‘span‘).wrap(‘<a href="http://soulsjie.com"></a>‘)

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


<a href="http://soulsjie.com"><span>连接文字</span></a>

2、DOM包裹unwrap()方法

要使用.remove()来删除选中元素的父元素是比较复杂的此时unwrap()可以将被选中的元素的父元素删除

使用:

 //找到所有p元素,删除父容器div
        $(‘p‘).unwrap(‘<div></div>‘)

3、DOM包裹wrapAll()方法

.wrap( )是针对单个元素进行包裹,当要包裹几个元素的时候需要用wrapall()

如:

想要包裹下面的p标签在一个div内:

<p>内容1</p>

<p>内容2</p>

//1.直接加参数,进行包裹

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

//2.根据函数的返回值包裹内容

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

包裹后的结构如下:

<div>
    <p>内容1</p>
    <p>内容2</p>
</div>

4、DOM包裹wrapInner()方法

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

原本结构:

<div>内容1</div>
<div>内容2</div>

给div内容包裹上p元素

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

最后的结构,匹配的div的内容被p给包裹了

<div>
    <p>内容1</p>
</div>
<div>
    <p>内容2</p>
</div>


jQuery_DOM学习之------包裹元素的方法

原文:http://www.cnblogs.com/soulsjie/p/7803450.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!