[ jquery 文档处理 wrapAll(html|ele)) ] 此方法用于把所有匹配的元素使用指定的 HTML 元素来包裹
Posted 窗棂博客记录
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[ jquery 文档处理 wrapAll(html|ele)) ] 此方法用于把所有匹配的元素使用指定的 HTML 元素来包裹相关的知识，希望对你有一定的参考价值。
将所有匹配的元素用单个元素包裹起来
这于 ‘.wrap()‘<a href="http://docs.jquery.com/Manipulation/wrap" title="Manipulation/wrap"></a> 是不同的，‘.wrap()‘为每一个匹配的元素都包裹一次。这种包装对于在文档中插入额外的结构化标记最有用，而且它不会破坏原始文档的语义品质。这个函数的原理是检查提供的第一个元素并在它的代码结构中找到最上层的祖先元素－－这个祖先元素就是包装元素
实例:<html lang=‘zh-cn‘>
<head>
<title>Insert you title</title>
<meta http-equiv=‘description‘ content=‘this is my page‘>
<meta http-equiv=‘keywords‘ content=‘keyword1,keyword2,keyword3‘>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type=‘text/javascript‘ src=‘./js/jquery-1.12.1.min.js‘></script>
<style type="text/css">
*{margin:0;padding:0;}
html{font:400 15px/1.2em ‘Courier New‘;color:#666;width:750px;margin:25px auto;}
ul{list-style:none;}
.hover{color:#FF96EC;}
.wrapAll{color:#FF96EC;}
</style>
<script type=‘text/javascript‘>
$(function(){
/**
将所有匹配的元素全部放在创造出来的 div 元素中,如果没有在同一个中就通过移动来达到目的,所以在控制台会有空元素div
*/
$(‘.list‘).wrapAll(document.createElement("div"));
// $(‘.list‘).wrap(document.createElement("div")); // 为每一个匹配的元素都进行匹配一次
});
</script>
</head>
<body>
<div id=‘demo‘>
<div class=‘noClassDemo‘>
<ul class=‘list‘>
<li>Index value :</li>
<li>Index value :</li>
<li>Index value :</li>
<li>Index value :</li>
<li>Index value :</li>
<li>Index value :</li>
<li class=‘active‘>Index</li>
<li class=‘wrap‘>Index value :</li>
<li>Index value :</li>
</ul>
<div>
<p class=‘list‘>this is unwrap test</p>
</div>
</div>
<p class=‘list‘>this is unwrap test</p>
</div>
</body>
</html>
以上是关于[ jquery 文档处理 wrapAll(html|ele)) ] 此方法用于把所有匹配的元素使用指定的 HTML 元素来包裹的主要内容，如果未能解决你的问题，请参考以下文章
jquery之wrap(),wrap(),unwrap()方法详解
[ jquery 文档处理 wrapInner(htm|element|fnl) ] 此方法用于把所有匹配的元素的子元素(包括文本节点)使用指定的 HTML 元素来包裹