donglv9116
2019-03-20 23:39
浏览 114
已采纳

如何在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

图片转代码服务由CSDN问答提供 功能建议

对于下面的代码,我希望每个 et_pb_module 转移到具有 item 递归。

 &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>&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; 
 <  / code>  
 
 

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

  $(“。et_pb_column&gt;  .et_pb_module“)。each(function(){
 $(”#owl-demo .owl-item&gt; .item“)。append($(this).html()); 
}); 
    
 
 

我的jquery代码的问题在于它将所有 et_pb_module 应用于每个div,其中包含 item

感谢任何帮助。谢谢

  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • dongyang2229 2019-03-20 23:47
    已采纳

    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>
    
    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题