CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user7576961
user7576961

Reputation:

I need to move images from one element to another

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

Upvotes: 1

Views: 108

Answers (7)

user7576961
user7576961

Reputation:

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();
    }
});­­­­

Upvotes: 1

m87
m87

Reputation: 4523

The following code should work perfectly :

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

short and simple.

Upvotes: 0

ir0h
ir0h

Reputation: 361

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

Just before </body>

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

Upvotes: 1

LordNeo
LordNeo

Reputation: 1182

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.

Upvotes: 0

Monzurul Shimul
Monzurul Shimul

Reputation: 8396

Try with this:

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

Upvotes: 0

Chris
Chris

Reputation: 355

This will do it:

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

Upvotes: 0

Donnie D&#39;Amato
Donnie D&#39;Amato

Reputation: 3940

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');

Upvotes: 0

Related Questions