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
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.