码迷,mamicode.com
首页 > Web开发 > 详细

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

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

标签:func   pre   代码   参数   remove   htm   针对   lan   lang   

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学习之------包裹元素的方法

标签:func   pre   代码   参数   remove   htm   针对   lan   lang   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!