如何在jquery中递归地将所有子元素传递给组div包装器?
For the code below I want each et_pb_module
to transfer to div with class of item
recursively.
<div class="et_pb_column">
<div class="et_pb_module">
content 1
</div>
<div class="et_pb_module">
content 2
</div>
<div class="et_pb_module">
content 3
</div>
</div>
<div class="owl-wrapper">
<div class="owl-item">
<div class="item">
</div>
</div>
<div class="owl-item">
<div class="item">
</div>
</div>
<div class="owl-item">
<div class="item">
</div>
</div>
</div>
The correct output looks like this:
<div class="owl-wrapper">
<div class="owl-item">
<div class="item">
<div class="et_pb_module">
content 1
</div>
</div>
</div>
<div class="owl-item">
<div class="item">
<div class="et_pb_module">
content 2
</div>
</div>
</div>
<div class="owl-item">
<div class="item">
<div class="et_pb_module">
content 3
</div>
</div>
</div>
</div>
My current jquery code looks like this:
$(".et_pb_column > .et_pb_module").each(function() {
$("#owl-demo .owl-item > .item").append($(this).html());
});
The problem with my jquery code is that it copes all et_pb_module
to each div with class of item
Any help is appreciated. Thanks
对于下面的代码,我希望每个 正确的输出如下所示: p>
我当前的jquery代码如下所示: p>
我的jquery代码的问题在于它将所有 感谢任何帮助。谢谢 p>
div> et_pb_module code>转移到具有
item code>递归。 p>
&lt; div class =“et_pb_column”&gt;
&lt; div class =“et_pb_module”&gt;
content 1
&lt; / div&gt;
&lt; div class =“et_pb_module”&gt;
content 2
&lt; / div&gt;
&lt; div class =“et_pb_module”&gt;
content 3
&lt; / div&gt;
&lt; / div&gt;
&lt; div class =“owl-wrapper”&gt;
&lt; div class =“owl-item”&gt;
&lt; div class =“item”&gt;
&lt; / div&gt;
&lt; / div&gt;
&lt; div class =“owl-item”&gt;
&lt; div class =“item”&gt;
&lt; / div&gt;
&lt; / div&gt;
&lt; div class =“owl-item”&gt;
&lt; div class =“item”&gt;
&lt; / div&gt; \ n&lt; / div&gt;
&lt; / div&gt;
code> pre>
&lt; div class =“owl-wrapper”&gt;
&lt; div class =“owl-item”&gt;
&lt; div class =“item”&gt;
&lt; div class =“et_pb_module”&gt;
content 1
&lt; / div&gt;
&lt; / div&gt;
&lt; / div&gt ;
&lt; div class =“owl-item”&gt;
&lt; div class =“item”&gt;
&lt; div class =“et_pb_module”&gt;
content 2
&lt ; / div&gt;
&lt; / div&gt;
&lt; / div&gt;
&lt; div class =“owl-item”&gt;
&lt; div class =“item”&gt;
&lt; div class =“et_pb_module”&gt;
content 3
&lt; / div&gt;
&lt; / div&gt;
&lt; / div&gt;
&lt; / div&gt;
pre>
$(“。et_pb_column&gt; .et_pb_module“)。each(function(){
$(”#owl-demo .owl-item&gt; .item“)。append($(this).html());
});
code> pre>
et_pb_module code>应用于每个div,其中包含
item code> p>
This is what you are looking to do:
$(".et_pb_column > .et_pb_module").each(function(i) {
$(".owl-item > .item")[i].append($(this)[0]);
});
Here is the working code:
$(".et_pb_column > .et_pb_module").each(function(i) {
$(".owl-item > .item")[i].append($(this)[0]);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="et_pb_column">
<div class="et_pb_module">
content 1
</div>
<div class="et_pb_module">
content 2
</div>
<div class="et_pb_module">
content 3
</div>
</div>
<div class="owl-wrapper">
<div class="owl-item">
<div class="item">
</div>
</div>
<div class="owl-item">
<div class="item">
</div>
</div>
<div class="owl-item">
<div class="item">
</div>
</div>
</div>
Inspect to see the set is correct.
</div>