ある要素から別の要素に画像を移動する必要があります

Question

私はこのhtml構造を持っています。私は、他のフィールド項目を他の項目と一緒にしたい。

<div class="secondary-images"> 
    <div data-quickedit-field-id="node/29/rd_page_secondary_image/da/full" class="group1"> 
    <div class="field__item"></div> 
    <div class="field__item"></div> 
    <div class="field__item"></div> 
    <div class="field__item"></div> 
    <div class="field__item"></div> 
    <div class="field__item"></div> 
    </div> 
    <div data-quickedit-field-id="node/29/rd_page_secondary_image/da/full" class="group2"> 
    <div class="field__item"></div> 
    <div class="field__item"></div> 
    </div> 
</div> 

これが欲しいです。

<div class="secondary-images"> 
    <div data-quickedit-field-id="node/29/rd_page_secondary_image/da/full" class="group1"> 
    <div class="field__item"></div> 
    <div class="field__item"></div> 
    <div class="field__item"></div> 
    <div class="field__item"></div> 
    <div class="field__item"></div> 
    <div class="field__item"></div> 
    <div class="field__item"></div> 
    <div class="field__item"></div> 
    </div> 
    <div data-quickedit-field-id="node/29/rd_page_secondary_image/da/full" class="group2"> 

    </div> 
</div> 

どのように要素を移動しますか？ 私はこれを試したが運がなかった。

var $element = $('.secondary-images > .group2').detach(); 
$('.secondary-images > .group1').append($element); 

Answer 1

次のコードは完璧に動作するはずです：

$('.secondary-images .group2').detach().appendTo($('.secondary-images .group1')); 

短くてシンプル。

Answer 2

1.-間違い：domが操作可能であることを確認してください。だから、これは正常に動作する必要があります

$(document).ready(function() { 
    var $element = $('.secondary-images > .group2').detach(); 
    $('.secondary-images > .group1').append($element); 
}); 

2.-あなたはそれが仕事をしたい方法：原因レイアウトには、上記のコードは、それをネスト、group1 divの内側に表示されるように、全体group2のdivを行います。

$(document).ready(function() { 
 
    $('.secondary-images > .group2 > .field__item').each(function() { 
 
    $(this).detach(); 
 
    $('.secondary-images > .group1').append(this); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="secondary-images"> 
 
    <div data-quickedit-field-id="node/29/rd_page_secondary_image/da/full" class="group1"> 
 
     <div class="field__item">a</div> 
 
     <div class="field__item">b</div> 
 
     <div class="field__item">c</div> 
 
     <div class="field__item">d</div> 
 
     <div class="field__item">e</div> 
 
     <div class="field__item">f</div> 
 
    </div> 
 
    <div data-quickedit-field-id="node/29/rd_page_secondary_image/da/full" class="group2"> 
 
     <div class="field__item">g</div> 
 
     <div class="field__item">h</div> 
 
    </div> 
 
</div> 
 
<!-- REFERENCE 
 
<div class="secondary-images"> 
 
    <div data-quickedit-field-id="node/29/rd_page_secondary_image/da/full" class="group1"> 
 
     <div class="field__item"></div> 
 
     <div class="field__item"></div> 
 
     <div class="field__item"></div> 
 
     <div class="field__item"></div> 
 
     <div class="field__item"></div> 
 
     <div class="field__item"></div> 
 
     <div class="field__item"></div> 
 
     <div class="field__item"></div> 
 
    </div> 
 
    <div data-quickedit-field-id="node/29/rd_page_secondary_image/da/full" class="group2"> 
 

 
    </div> 
 
</div> 
 
-->

これは切り離し、グループ2からのすべてのfield__itemを追加し、その後、あなたが行うことができ、グループ1の上にそれを置くだろう：私はあなたがそれだけので、ここでの内容を置きたいと思いますが、スニペットですあなたがグループ2で気に入っているものは、それを削除するか、後でコンテンツでいっぱいにしておきます。

Answer 3

これは1行で行うことができます。関数やイベントを入れることができます。

$('.secondary-images > .group2 > div').appendTo('.secondary-images > .group2'); 

Answer 4

これはそれを行うだろう。

var $element = $('.secondary-images > .group2 .field__item').detach(); 
$('.secondary-images > .group1').append($element); 

Answer 5

これを試してみてください：ここで</body>

は一例で直前に

$('.secondary-images .group2 .field__item').appendTo($('.secondary-images .group1')); 

Answer 6

<script> 
    $(document).ready(function() { 
    $(".group1").append($(".group2").detach()); 
    }); 
</script> 

：http://plnkr.co/edit/U6NwzpcYFojCrDkXWMRt?p=preview

Answer 7

これは私のために働いた。

$('.secondary-images .group2 .field__item').detach().appendTo($('.secondary-images .group1')); 
$('.secondary-images .field__item').each(function() { 
    if ($(this).find('picture').length) {} else { 
     $(this).remove(); 
    } 
});­­­­