javascript - 如何分离并附加到仅相关的 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>

预期结果。

但是在运行上面的代码之后，我得到了以下结果。

标签： javascripthtmljquery

Answer 1

.detach描述：从 DOM 中移除匹配的元素集。

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

• 您需要使用循环遍历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 结构，则需要修改它以捕获所需的元素