如何在jQuery中用不同的类名包装多个div块?
可能重复:如何在jQuery中用不同的类名包装多个div块?,jquery,dom,jquery-selectors,word-wrap,jquery-traversing,Jquery,Dom,Jquery Selectors,Word Wrap,Jquery Traversing,可能重复: 我在文档中重复了以下HTML块 <!-- first block --> <div class="first"> My first div </div> <div class="second"> My second div </div> <!-- second block --> <div class="first"> My first div </div> <
我在文档中重复了以下HTML块
<!-- first block -->
<div class="first">
My first div
</div>
<div class="second">
My second div
</div>
<!-- second block -->
<div class="first">
My first div
</div>
<div class="second">
My second div
</div>
...
我的第一个div
我的第二个div
我的第一个div
我的第二个div
...
如何使用jQuery包装div块以获得以下结果
<!-- first block -->
<div class="container">
<div class="first">
My first div
</div>
<div class="second">
My second div
</div>
</div>
<!-- second block -->
<div class="container">
<div class="first">
My first div
</div>
<div class="second">
My second div
</div>
</div>
...
我的第一个div
我的第二个div
我的第一个div
我的第二个div
...
您可以执行以下操作:
$('#btnTest').on('click', function() {
$("body").append('<div class="container"></div>');
$("body").append('<div class="container"></div>');
$(".first").eq(0)
.clone()
.appendTo($(".container").eq(0))
.end()
.remove();
$(".second").eq(0)
.clone()
.appendTo($(".container").eq(0))
.end()
.remove();
$(".first").eq(0)
.clone()
.appendTo($(".container").eq(1))
.end()
.remove();
$(".second").eq(0)
.clone()
.appendTo($(".container").eq(1))
.end()
.remove();
});
$('btnTest')。在('click',function()上{
$(“正文”)。附加(“”);
$(“正文”)。附加(“”);
$(“.first”).eq(0)
.clone()
.appendTo($(“.container”).eq(0))
(完)
.remove();
$(“.second”).eq(0)
.clone()
.appendTo($(“.container”).eq(0))
(完)
.remove();
$(“.first”).eq(0)
.clone()
.appendTo($(“.container”).eq(1))
(完)
.remove();
$(“.second”).eq(0)
.clone()
.appendTo($(“.container”).eq(1))
(完)
.remove();
});
首先,向DOM中添加希望使用类容器的div数。
然后,对于每个div.first和.second,您必须在dom$(“.first”).eq(0)
中获取第一个div.first,然后将其附加到第一个“.container”。在删除之前,必须使用.end()
,以确保删除原始div,而不是克隆的div
对每个div执行此操作,并通过更改$(“.container”).eq(0)
中的数字来更改“.container”
这段代码对于您的示例来说很好,但是如果您有更多的“.container”,您应该对其进行循环。您两次提出了相同的问题。。。请学会接受你提出的所有问题的答案