我试图通过使用jQuery的before()和after()来围绕一个元素(我的'模板'div)包装一个div.当我尝试在所选元素之后插入一个结束时,它实际上被放置在目标之前.
例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Div Wrap</title>
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script>
$('document').ready(function() {
var beforestr = "<div id=\"wrap\"><div id=\"header\">Top</div><div id=\"page\">";
var afterstr = "</div><div id=\"footer\">Bottom</div></div>";
$('#template').before(beforestr);
$('#template').after(afterstr);
});
</script>
</head>
<body>
<div id="template">
<h1>Page Title</h1>
<p>Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Mauris
placerat eleifend leo. Quisque sit amet est et sapien
ullamcorper pharetra.
<script>document.write('This script should still work and might contain variables. Please don\'t recommend concatenation.');</script>
Donec non enim in turpis pulvinar facilisis.</p>
</div>
</body>
</html>
结果是:
<div id="wrap">
<div id="header">Top</div>
<div id="page">
</div>
</div>
<div id="template">
<h1>Page Title</h1>
<p>Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Mauris
placerat eleifend leo. Quisque sit amet est et sapien
ullamcorper pharetra.
This script should still work and might contain variables. Please don't recommend concatenation.
Donec non enim in turpis pulvinar facilisis.</p>
</div>
<div id="footer">Bottom</div>
为什么我的结束换行和页面 div在目标之前放置,当我试图将它们放在()之后？有没有另一种方法来实现这一点(请记住,我可能需要在模板div中调用脚本函数)？
我相信你知道,最好的做法不是我想要的.
您不能插入片段,因为它们需要是完整的DOM元素.相反,你应该.wrap()在这里的某些地方使用; 它应该看起来像这样:
$(document).ready(function() {
$('#template').wrap('<div id="wrap">')
.wrap('<div id="page">').parent()
.before('<div id="header">Top</div>')
.after('<div id="footer">Bottom</div>');
});
你可以在这里测试一下.这样做会影响整体效果:
<div id="wrap">
<div id="header">Top</div>
<div id="page">
<div id="template">
<h1>Page Title</h1>
<p id="aeaoofnhgocdbnbeljkmbjdmhbcokfdb-mousedown">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Donec non enim in turpis pulvinar facilisis.</p>
</div>
</div>
<div id="footer">Bottom</div>
</div>
| 归档时间： |
|
| 查看次数： |
628 次 |
| 最近记录： |