JQuery元素外包裹元素要注意的问题

最新推荐文章于 2023-02-21 12:25:47 发布

_荣耀之路_

最新推荐文章于 2023-02-21 12:25:47 发布

阅读量397

点赞数

分类专栏： JQuery 文章标签：添加元素 wrap wrapInner

本文链接：https://blog.csdn.net/asty9000/article/details/84771297

版权

JQuery 同时被 2 个专栏收录

31 篇文章 2 订阅

订阅专栏

JavaScript

28 篇文章 2 订阅

订阅专栏

使用wrap时，当参数为普通的html字符串时，会将每个匹配的元素直接包裹在传入的html结构的第一个子元素的最深处。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").wrap("<div><span><b></b></span><b><span><b></b></span></b></div>");
    });
});
</script>
<style type="text/css">
div{background-color:yellow;}
</style>
</head>
<body>

<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>给每个P元素包裹一个div元素</button>
</body>
</html>

如上代码执行后，DOM结构如下：

当参数为选择器，或者选择器接受的字符串时，如果传入wrap的选择器没有选中任何元素，则不会做任何操作。在包裹选中元素列表中的每个元素时，都会重新获取一次元素。

如果传入wrap的是选择器选中的元素在首个被包裹的元素之前，多次调用的话元素数量会膨胀的非常快。此时第一个被包裹的元素第n次调用后元素数 $S_{1,n}$ ：

$S_{1,n}=\left\{\begin{matrix} 1& n=1\\ S_{1,n-1}\left ( 1+\sum_{i}^{S_{1,n-1}}2^{i-1}\right )& n>1 \end{matrix}\right.$

第m个元素n次调用后元素数 $S_{m,n}$ ：

$S_{m,n}=\left\{\begin{matrix} 1& n=1 \\ S_{m,n-1}\left ( S_{1,n}+1 \right )& n>1 \end{matrix}\right.$

如果传入wrap的是选择器接受的字符串，则第m个元素n次调用后元素数 $S_{m,n}$ ：

$S_{m,n}=\left\{\begin{matrix} 2& n=1 \\ S_{m,n-1}\left ( S_{1,n}+1 \right )& n>1 \end{matrix}\right.$

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        //$("p").wrap($("div"));//传入选择器
	$("p").wrap("div");//传入选择器接受的字符串
    });
});
</script>
<style type="text/css">
div{background-color:yellow;}
</style>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<div></div>
<button>给每个P元素包裹一个div元素</button>
</body>
</html>

为了防止这种情况，需要保证包裹元素的元素在首个被包裹的元素之前。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        //$("p").wrap($("div"));//传入选择器
	$("p").wrap("div");//传入选择器接受的字符串
    });
});
</script>
<style type="text/css">
div{background-color:yellow;}
</style>
</head>
<body>
<div></div>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>给每个P元素包裹一个div元素</button>
</body>
</html>

当wrapInner时，当参数为普通的html字符串时，会将每个匹配的元素内容直接包裹在传入的html结构的第一个子元素的最深处。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").wrapInner("<span><b></b><b><span></span></b></span>");
    });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>在每个p元素的内容上包装一个b元素</button>
</body>
</html>

当参数为选择器，或者选择器接受的字符串时，如果传入wrapInner的选择器没有选中任何元素，则不会做任何操作。

如果传入wrapInner的是选择器或选择器接受的字符串选中的元素在首个被包裹的元素之前，当传入wrapInner的参数是选择器时，每次调用只进行一次查找，此时第一个被包裹的元素第n次调用后元素数 $S_{1,n}$ ：

$S_{1,n}=2^{n-1}$

第m个元素n次调用后元素数 $S_{m,n}$ ：

$S_{m,n}=\left\{\begin{matrix} 1& n=1 \\ S_{m,n-1}+S_{1,n-1}=2^{n-1}& n>1 \end{matrix}\right.$

如果传入wrapInner的是选择器接受的字符串，在包裹选中元素列表中的每个元素时，都会重新获取一次元素。则第m个元素n次调用后元素数 $S_{m,n}$ ：

$S_{m,n}=S_{m,n-1}+S_{1,n}=2^{n}$

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        //$("p").wrapInner("b");//选择器接受的字符串
        $("p").wrapInner($("b"));//选择器
    });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>在每个p元素的内容上包装一个b元素</button>
<b></b>
</body>
</html>

为了防止这种情况，需要保证包裹元素的元素在首个被包裹的元素之前。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        //$("p").wrapInner("b");//选择器接受的字符串
        $("p").wrapInner($("b"));//选择器
    });
});
</script>
</head>
<body>
<b></b>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>在每个p元素的内容上包装一个b元素</button>
</body>
</html>