在每個(gè)匹配元素的外部插入新元素的方法
wrap :把所有匹配的元素,用其他元素的結(jié)構(gòu)化包裹起來
wrapAll : 把所有匹配的元素,用單個(gè)元素包裹起來
wrapInner : 把匹配元素的子類用html結(jié)構(gòu)包裹起來
二、實(shí)例
(1)wrap
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../jquery-2.0.0/jquery-2.0.0.js"></script>
<script type="text/javascript">
$(function() {
$("div a").wrap("<div id='id'></div>");
});
</script>
</head>
<body>
<div>
<a>liuxingyu</a> <a>liuxingyu</a> <a>liuxingyu</a> <a>liuxingyu</a>
</div>
</body>
</html>
firebug顯示結(jié)果:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../jquery-2.0.0/jquery-2.0.0.js" type="text/javascript">
<script type="text/javascript">
</head>
<body>
<div>
<div id="id">
<a>liuxingyu</a>
</div>
<div id="id">
<a>liuxingyu</a>
</div>
<div id="id">
<a>liuxingyu</a>
</div>
<div id="id">
<a>liuxingyu</a>
</div>
</div>
</body>
</html>
(2)wrapAll
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../jquery-2.0.0/jquery-2.0.0.js"></script>
<script type="text/javascript">
$(function() {
$("div a").wrapAll("<div id='id'></div>");
});
</script>
</head>
<body>
<div>
<a>liuxingyu</a> <a>liuxingyu</a> <a>liuxingyu</a> <a>liuxingyu</a>
</div>
</body>
</html>
firebug顯示結(jié)果:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../jquery-2.0.0/jquery-2.0.0.js" type="text/javascript">
<script type="text/javascript">
$(function() {
$("div a").wrapAll("<div id='id'></div>");
});
</script>
</head>
<body>
<div>
<div id="id">
<a>liuxingyu</a> <a>liuxingyu</a> <a>liuxingyu</a> <a>liuxingyu</a>
</div>
</div>
</body>
</html>
(3)wrapInner
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../jquery-2.0.0/jquery-2.0.0.js" type="text/javascript">
<script type="text/javascript">
$(function() {
$("div").wrapInner("<div id='id'></div>");
});
</script>
</head>
<body>
<div>
<a>liuxingyu</a> <a>liuxingyu</a> <a>liuxingyu</a> <a>liuxingyu</a>
</div>
</body>
</html>
firebug顯示結(jié)果:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../jquery-2.0.0/jquery-2.0.0.js" type="text/javascript">
<script type="text/javascript">
$(function() {
$("div").wrapInner("<div id='id'></div>");
});
</script>
</head>
<body>
<div>
<div id="id">
<a>liuxingyu</a> <a>liuxingyu</a> <a>liuxingyu</a> <a>liuxingyu</a>
</div>
</div>
</body>
</html>
相關(guān)文章
如何使用PHP+jQuery+MySQL實(shí)現(xiàn)異步加載ECharts地圖數(shù)據(jù)(附源碼下載)
ECharts地圖主要用于地理區(qū)域數(shù)據(jù)的可視化,展示不同區(qū)域的數(shù)據(jù)分布信息,通過本文給大家介紹如何使用PHP+jQuery+MySQL實(shí)現(xiàn)異步加載ECharts地圖數(shù)據(jù),需要的朋友參考下吧2016-02-02jQuery實(shí)現(xiàn)點(diǎn)擊行選中或取消CheckBox的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)點(diǎn)擊行選中或取消CheckBox的方法,涉及jQuery針對(duì)頁面元素的循環(huán)遍歷與屬性操作相關(guān)技巧,需要的朋友可以參考下2016-08-08jQuery中常用動(dòng)畫效果函數(shù)(日常整理)
這篇文章主要介紹了小編日常收集整理的關(guān)于jQuery中常用動(dòng)畫效果函數(shù)的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-09-09jquery實(shí)現(xiàn)全選功能效果的實(shí)現(xiàn)代碼
下面小編就為大家?guī)硪黄猨query實(shí)現(xiàn)全選功能效果的實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05Jquery.TreeView結(jié)合ASP.Net和數(shù)據(jù)庫生成菜單導(dǎo)航條
在網(wǎng)上瀏覽了許多關(guān)于利用Jquery.TreeView插件生成樹的例子!但是大多數(shù)都沒有結(jié)合數(shù)據(jù)庫來生成樹,很難運(yùn)用到實(shí)際項(xiàng)目中!2010-08-08解決jQuery動(dòng)態(tài)獲取手機(jī)屏幕高和寬的問題
這篇文章主要介紹了如何解決jQuery動(dòng)態(tài)獲取手機(jī)屏幕高和寬的問題,需要的朋友可以參考下2014-05-05jQuery.ajax實(shí)現(xiàn)根據(jù)不同的Content-Type做出不同的響應(yīng)
使用H5+ASP.NET General Handler開發(fā)項(xiàng)目,使用ajax進(jìn)行前后端的通訊。有一個(gè)場(chǎng)景需求是根據(jù)服務(wù)器返回的不同數(shù)據(jù)類型,前端進(jìn)行不同的響應(yīng),這里記錄下如何使用$.ajax實(shí)現(xiàn)該需求,需要的朋友可以參考下2016-11-11