用递增ids围绕jQuery中的元素包装嵌套的<div>
我刚开始学习jQuery，遇到了一个难住我的问题。我需要移动，添加和命名div而不影响内容。
我有一个固定宽度的包装器div，里面有部分div。它看起来是这样的：
<body>
<div id="whitewrap">
<div id="wrapper-1" class="wrapper">
<div class="clearfix">
<section id="block-1">
<h1>Title</h1>
<p>Some wonderful content.</p>
</section><!-- #block-1 -->
<section id="block-2">
<h1>Title</h1>
<p>Some wonderful content.</p>
</section><!-- #block-2 -->
<section id="block-3">
<h1>Title</h1>
<p>Some wonderful content.</p>
</section><!-- #block-3 -->
</div><!-- .clearfix -->
</div><!-- #wrapper-1 -->
</div><!-- #whitewrap -->
</body>我需要的是每个部分都有自己的包装器div，并在每个包装器周围添加一个容器div。包装器和容器的ID #需要自动增加，因为这些部分是动态添加的。
这就是我所想的。
<body>
<div id="whitewrap">
<div id="container-1">
<div id="wrapper-1" class="wrapper">
<div class="clearfix">
<section id="block-1">
<h1>Title</h1>
<p>Some wonderful content.</p>
</section><!-- #block-1 -->
</div><!-- .clearfix -->
</div><!-- #wrapper-1 -->
</div><!--#container-1 -->
<div id="container-2">
<div id="wrapper-2" class="wrapper">
<div class="clearfix">
<section id="block-2">
<h1>Title</h1>
<p>Some wonderful content.</p>
</section><!-- #block-2 -->
</div><!-- .clearfix -->
</div><!-- #wrapper-2 -->
</div><!--#container-2 -->
<div id="container-3">
<div id="wrapper-3" class="wrapper">
<div class="clearfix">
<section id="block-3">
<h1>Title</h1>
<p>Some wonderful content.</p>
</section><!-- #block-3 -->
</div><!-- .clearfix -->
</div><!-- #wrapper-3 -->
</div><!--#container-3 -->
</div><!-- #whitewrap -->
</body>谢谢你们！
回答 3
Stack Overflow用户
发布于 2012-07-28 08:21:30
wrap/unwrap就是您要在这里查找的内容。具体地说，为您提供索引参数的重载将非常有用：
$("#block-1").unwrap().unwrap();
$("section").wrap(function(i) {
var num = i + 1;
return "<div id='container-" + num + "'>" +
"<div id='wrapper-" + num + "' class='wrapper'>" +
"<div class='clearfix'></div></div></div>";
});示例： http://jsfiddle.net/andrewwhitaker/NfuGz/1/
Stack Overflow用户
发布于 2012-07-28 07:59:44
使用带有递增计数器的jQuery的.wrap()函数。将一个函数传递给.wrap()，该函数构建一个HTML代码片段来包围每个<section>，根据需要在it中使用计数器并递增它：
var counter = 1;
$('section').wrap(function() {
// Make a string of the HTML which should wrap around each <section>
var wrapper = '<div id="container-' + counter + '"><div id="wrapper-' + counter + '" class="wrapper"></div></div>';
// Increment the counter
counter++;
// Return the string and it will be applied around each <section>
return wrapper;
});Here's a demo...
注意:您已经在整个过程中使用了一个<div id="wrapper-1" />。如果应该将其删除(如果<section>周围有另一个wrapper-1，则应该删除)，请首先使用.unwrap()：
$("div.clearfix").unwrap();
// Then run the rest of the code...As in this demo...
Stack Overflow用户
发布于 2012-07-28 08:01:31
查看wrap()和wrapAll()。要自动递增该数字，可以使用each() section上的index()。
在任何情况下，我都会考虑重新考虑标签树，我不确定包装在许多div中的section是否在语义上是最正确的。也许article更适合？引用自网站：
部分元素表示文档或应用程序的通用部分。在此上下文中，部分是内容的主题分组，通常带有标题。
https://stackoverflow.com/questions/11697029
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号