javascript - 如何在 jquery 中递归地将所有子元素传输到组 div 包装器？

Question

对于下面的代码，我希望每个都以递归et_pb_module方式转移到 div 类。item

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

正确的输出如下所示：

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

我当前的 jquery 代码如下所示：

  $(".et_pb_column > .et_pb_module").each(function() {
    $("#owl-demo .owl-item > .item").append($(this).html());
  });

我的 jquery 代码的问题是它处理et_pb_module每个 div 的类item

任何帮助表示赞赏。谢谢

标签： javascriptphpjqueryhtmlwordpress

Answer 1

这就是您要执行的操作：

$(".et_pb_column > .et_pb_module").each(function(i) {
    $(".owl-item > .item")[i].append($(this)[0]);
});

这是工作代码：

 $(".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>

检查设置是否正确。