DOM包裹wrapInner()方法

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

qq_37036642

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

阅读量306

点赞数

分类专栏： Jquery

本文链接：https://blog.youkuaiyun.com/qq_37036642/article/details/76652403

版权

Jquery 专栏收录该内容

29 篇文章

订阅专栏

如果要将合集中的元素内部所有的子元素用其他元素包裹起来，并当作指定元素的子元素，针对这样的处理，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 标签应该是被正确关闭的。

<!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: 130px;
}

.left div,
.right div {
width: 100px;
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包裹wrapInner()方法</h2>
<div class="left">
<div class="aaron1">点击,通过wrapInner方法给所有div元素增加内部父容器p</div>
<div class="aaron2">点击,通过wrapInner的回调方法给每个div元素增加内部父容器a</div>
</div>
<div class="right">
<div class="right1">p元素</div>
<div class="right1">p元素</div>
</div>
<div class="left">
<div class="left1">a元素</div>
<div class="left1">a元素</div>
</div>

<script type="text/javascript">
$(".aaron1").on('click', function() {
//给所有class=right1的div元素，增加内部包裹父容器p
$('.right1').wrapInner('<p></p>');
})
</script>
<script type="text/javascript">
$(".aaron2").on('click', function() {
//wrapInner接受一个回调函数
//每一次遍历this都指向了合集中每一个class=left1的div元素
$('.left1').wrapInner(function() {
return '<a></a>'
})
})
</script>
</body>

v</html>