I need to move images from one element to another

Question

I have this html structure. I want the other field items to be together with the others.

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

And I want this.

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

How do i move the elements. I tried this but with no luck.

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

why not just append on the second div and then remove from the first div? update: due to how your structure is, you will get the whole .group2 div inside the group1 div, not just the content. You could do it iterating over the subset. — LordNeo, Feb 16 '17 at 19:37
Duplicate of [How to move an element into another element?](http://stackoverflow.com/questions/1279957/how-to-move-an-element-into-another-element) — previous_developer, Feb 16 '17 at 22:05

ir0h · Answer 1 · 2017-02-16T20:52:53.607

1

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

Just before </body>

Here is an example: http://plnkr.co/edit/U6NwzpcYFojCrDkXWMRt?p=preview

edited Feb 16 '17 at 20:52

answered Feb 16 '17 at 19:59

ir0h

311
5
9

Thank's for helping me. – Feb 17 '17 at 08:49

score 1 · Answer 2 · edited Feb 17 '17 at 10:24

1

This worked for me.

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

edited Feb 17 '17 at 10:24

m87

4,445
3
16
31

answered Feb 17 '17 at 08:56

LordNeo · Answer 3 · 2017-02-16T20:00:40.530

1.- The mistake: Make sure the dom is available for manipulation. So this should work correctly:

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

2.- The way you want it to work: Due to the layout, the above code will make the whole group2div to appear inside the group1 div, nesting it. I think you want to only put the content of it so here is the snippet:

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

This will detach and append every field__item from group2 and put it on group1, after that you can do whatever you like with group2, either remove it or leave it to fill with content later.

Why can't he start a variable with a $? We do it all the time, it helps to identify that the variable is referencing a jQuery object. — Chris, Feb 16 '17 at 19:55
sorry, my mistake (wrong language), then the only mistake is that the dom isn't ready when the function is called. — LordNeo, Feb 16 '17 at 19:59

score 0 · Answer 4 · answered Feb 16 '17 at 19:50

0

You should be able to do this in one line. You can put in a function or event.

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

answered Feb 16 '17 at 19:50

Donnie D'Amato

3,832
1
15
40

m87 · Accepted Answer · 2017-02-17T09:07:45.177

0

The following code should work perfectly :

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

short and simple.

edited Feb 17 '17 at 09:07

answered Feb 16 '17 at 19:52

m87

4,445
3
16
31

I will do that. Glad that you would help. – Feb 17 '17 at 08:52
Can you please help me once more. Now i have a lot of extra stuff that wasn't in my old div do you know what that is. Thank You – Feb 17 '17 at 08:54
`old div` as in `group1`? – m87 Feb 17 '17 at 08:56
No excuse me old div .group2. In gruop2 there was onle 2 filed__items but now are 4 extra items in group1 – Feb 17 '17 at 08:59
can you make a fiddle? so it'll be more easier to understand what's actually going wrong or possibly update your question. – m87 Feb 17 '17 at 09:01
Yes but excuse me what is a fiddle?? :) – Feb 17 '17 at 09:03
[JSFiddle](https://jsfiddle.net/) is an online platform to run your HTML, CSS & JS – m87 Feb 17 '17 at 09:04
Ok thank you i actually think i found out now. Thanks a lot for your help – Feb 17 '17 at 09:05
Without .field__item after group2 it did'nt work but with it added an extra field__item that contains all of the stuff from group2. – Feb 17 '17 at 09:14
It works now. I had an extra element without an image, then i used jquery to check if the div contained an image or not and then i removed the image. I will post my code. – Feb 17 '17 at 09:26
I worked half of the way, but is was just what i needed, so thank you. – Feb 17 '17 at 09:31

score 0 · Answer 6 · answered Feb 16 '17 at 19:53

0

This will do it:

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

answered Feb 16 '17 at 19:53

Chris

355
1
8

score 0 · Answer 7 · answered Feb 16 '17 at 19:55

0

Try with this:

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

answered Feb 16 '17 at 19:55

Monzurul Shimul

8,132
2
28
42

I need to move images from one element to another

7 Answers7