DOM包裹wrapAll()方法
wrap是針對單個dom元素處理,如果要將集合中的元素用其他元素包裹起來,也就是給他們增加一個父元素,針對這樣的處理,JQuery提供了一個wrapAll方法
.wrapAll( wrappingElement ):給集合中匹配的元素增加一個外面包裹HTML結構
簡單的看一段代碼:
給所有p元素增加一個div包裹
$('p').wrapAll('<div></div>')
最后的結構,2個P元素都增加了一個父div的結構
<div>
<p>p元素</p>
<p>p元素</p>
</div>
.wrapAll( function ) :一個回調函數(shù),返回用于包裹匹配元素的 HTML 內容或 jQuery 對象
通過回調的方式可以單獨處理每一個元素
以上面案例為例,
$('p').wrapAll(function() {
return '<div><div/>';
})
以上的寫法的結果如下,等同于warp的處理了
<div>
<p>p元素</p>
</div>
<div>
<p>p元素</p>
</div>
注意:
.wrapAll()函數(shù)可以接受任何字符串或對象,可以傳遞給$()工廠函數(shù)來指定一個DOM結構。這種結構可以嵌套多層,但是最內層只能有一個元素。所有匹配元素將會被當作是一個整體,在這個整體的外部用指定的 HTML 結構進行包裹。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://idcbgp.cn/static/lib/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接受一個回調函數(shù)
//每一次遍歷this都指向了合集中每一個a元素
$('a').wrapAll(function() {
return '<div></div>'
})
})
</script>
</body>
</html>
請驗證,完成請求
由于請求次數(shù)過多,請先驗證,完成再次請求