DOM包裹wrapAll()方法

最新推荐文章于 2020-11-25 14:42:02 发布

qq_37036642

最新推荐文章于 2020-11-25 14:42:02 发布

阅读量283

点赞数

分类专栏： Jquery

本文链接：https://blog.csdn.net/qq_37036642/article/details/76652392

版权

Jquery 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

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 结构进行包裹。

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<style>
.left,
.right {
width: 250px;
height: 120px;
}

.left div,
.right div {
width: 100px;
/*height: 120px;*/
padding: 5px;
margin: 5px;
float: left;
border: 1px solid #ccc;
background: #bbffaa;
}

.right div {
background: yellow;
}

p {
border: 1px solid red;
}

a {
border: 1px solid blue;
}
</style>
</head>

<body>
<h2>DOM包裹wrapAll()方法</h2>
<div class="left">
<div class="aaron1">点击,通过wrapAll方法给所有P元素增加父容器div</div>
<div class="aaron2">点击,通过wrapAll的回调方法给每个a元素增加父容器div</div>
</div>
<div class="right">
<p>p元素</p>
<p>p元素</p>
</div>
<div class="left">
<a>a元素</a>
<a>a元素</a>
</div>
<script type="text/javascript">
$(".aaron1").on('click', function() {
//给所有p元素，增加父容器div
$('p').wrapAll('<div></div>');
})
</script>
<script type="text/javascript">
$(".aaron2").on('click', function() {
//wrapAll接受一个回调函数
//每一次遍历this都指向了合集中每一个a元素
$('a').wrapAll(function() {
return '<div></div>'
})
})
</script>
</body>

</html>

qq_37036642

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM包裹wrapAll()方法

wrap是针对单个dom元素处理，如果要将集合中的元素用其他元素包裹起来，也就是给他们增加一个父元素，针对这样的处理，JQuery提供了一个wrapAll方法.wrapAll( wrappingElement )：给集合中匹配的元素增加一个外面包裹HTML结构简单的看一段代码：p元素p元素给所有p元素增加一个div包裹$('p').wrapAll(''
复制链接

扫一扫

专栏目录