How do I transfer all child elements to a group div wrappers recursively in jquery?

Question

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

Answer 1

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.