Tengo esta estructura html. Quiero que los otros elementos de campo estén juntos con los demás.

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

Y yo quiero esto.

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

¿Cómo muevo los elementos? Lo intenté pero sin suerte.

var $element = $('.secondary-images > .group2').detach();
$('.secondary-images > .group1').append($element);
1
user7576961 16 feb. 2017 a las 22:36

7 respuestas

La mejor respuesta

El siguiente código debería funcionar perfectamente:

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

Corta y sencilla.

0
m87 17 feb. 2017 a las 09:07

1.- El error: asegúrese de que el dom esté disponible para la manipulación. Entonces esto debería funcionar correctamente:

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

2.- La forma en que desea que funcione: debido al diseño, el código anterior hará que todo el group2 div aparezca dentro del div group1, anidándolo. Creo que solo quieres poner el contenido, así que aquí está el fragmento:

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

Esto separará y agregará cada field__item del grupo2 y lo colocará en el grupo1, después de eso, puede hacer lo que quiera con el grupo2, ya sea eliminarlo o dejar que se llene de contenido más tarde.

0
LordNeo 16 feb. 2017 a las 20:00

Esto lo hará:

 var $element = $('.secondary-images > .group2 .field__item').detach();
 $('.secondary-images > .group1').append($element);
0
Chris 16 feb. 2017 a las 19:53
<script>
  $(document).ready(function() {
    $(".group1").append($(".group2").detach());
  });
</script>

Justo antes de </body>

Aquí hay un ejemplo: http://plnkr.co/edit/U6NwzpcYFojCrDkXpreM

1
ir0h 16 feb. 2017 a las 20:52

Prueba con esto:

$('.secondary-images .group2 .field__item').appendTo($('.secondary-images .group1'));
0
Monzurul Haque Shimul 16 feb. 2017 a las 19:55

Debería poder hacer esto en una línea. Puedes poner una función o evento.

$('.secondary-images > .group2 > div').appendTo('.secondary-images > .group2');
0
Donnie D'Amato 16 feb. 2017 a las 19:50

Esto funcionó para mí.

$('.secondary-images .group2 .field__item').detach().appendTo($('.secondary-images .group1'));
$('.secondary-images .field__item').each(function() {
    if ($(this).find('picture').length) {} else {
        $(this).remove();
    }
});­­­­
1
m87 17 feb. 2017 a las 10:24