如何分离并附加到相关的div仅jQuery

Question

我试图将div从相关的父级中分离出来，然后添加到相同的父级div中。

//Jquery Code
jQuery(function(){
    moveColorDots();

});
function moveColorDots(){
    var copyDivData = jQuery('.variations_form.wvs-archive-variation-wrapper').detach();
    copyDivData.appendTo('.product-variations');
}

<div class="pp-content-post">
    <div class="variations_form wvs-archive-variation-wrapper">
      some data here
    </div>
    <div class="product-box">
        <div class="glasses-sec">
            <h3>title</h3>
        </div>
        <div class="product-variations"></div>
    </div>
</div>

预期结果。

​

但在运行上述代码后，我将得到以下结果。

​

Answer 1

.detach描述:从DOM中删除匹配的元素集。

这意味着将所有分离的元素附加到每个product-variations元素..So中。

• 您需要使用variations_form.wvs-archive-variation-wrapper循环使用.each()元素。
• 您也可以直接使用.appendTo()。

​

//Jquery Code
jQuery(function(){
    moveColorDots();

});
function moveColorDots(){
    jQuery('.variations_form.wvs-archive-variation-wrapper').each(function(){
     var product_variations = jQuery(this).next('div').find('.product-variations');
     jQuery(this).appendTo(product_variations);
    });
    
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pp-content-post">
    <div class="variations_form wvs-archive-variation-wrapper">
      some data here 1
    </div>
    <div class="product-box">
        <div class="glasses-sec">
            <h3>title</h3>
        </div>
        <div class="product-variations"></div>
    </div>
</div>

<div class="pp-content-post">
    <div class="variations_form wvs-archive-variation-wrapper">
      some data here 2
    </div>
    <div class="product-box">
        <div class="glasses-sec">
            <h3>title</h3>
        </div>
        <div class="product-variations"></div>
    </div>
</div>

​

注意：这一行代码var product_variations = jQuery(this).next('div').find('.product-variations');取决于您的html结构，它适用于这里发布的html。但是，如果您有另一个html结构，则需要修改它以捕获所需的元素。