Cómo mover el elemento hijo de uno de los padres a otro usando jQuery

116

Estoy usando el complemento jQuery DataTables. Me gustaría mover el cuadro de búsqueda (.dataTables_filter) y el número de registros para mostrar el menú desplegable (.dataTables_length) de su elemento principal (.dataTables_wrapper) a otro div en mi página sin perder ningún comportamiento javascript registrado. Por ejemplo, el cuadro de búsqueda tiene una función asociada al evento 'keyup' y quiero mantenerlo intacto.Cómo mover el elemento hijo de uno de los padres a otro usando jQuery

El DOM es el siguiente:

<body> 
<div id="parent1"> 
    <div class="dataTables_wrapper" id="table1_wrapper"> 
    <div class="dataTables_length" id="table1_length"> 
     <select size="1" name="table1_length"> 
     <option value="10">10</option> 
     <option value="25">25</option> 
     <option value="50">50</option> 
     <option value="100">100</option> 
     </select> 
    </div> 
    <div class="dataTables_filter" id="table1_filter"> 
     <input type="text" class="search"> 
    </div> 
    <table id="table1"> 
    ... 
    </table> 
    </div> 
</div> 
<div id="parent2"> 
    <ul> 
    <li><a href="#">Link A</a></li> 
    <li><a href="#">Link B</a></li> 
    <li><a href="#">Link C</a></li> 
    </ul> 
</div> 
</body>

Esto es lo que me gustaría que el DOM para parecerse después de la mudanza:

<body> 
<div id="parent1"> 
    <div class="dataTables_wrapper" id="table1_wrapper"> 
    <table id="table1"> 
    ... 
    </table> 
    </div> 
</div> 
<div id="parent2"> 
    <div class="dataTables_filter" id="table1_filter"> 
    <input type="text" class="search"> 
    </div> 
    <div class="dataTables_length" id="table1_length"> 
    <select size="1" name="table1_length"> 
     <option value="10">10</option> 
     <option value="25">25</option> 
     <option value="50">50</option> 
     <option value="100">100</option> 
    </select> 
    </div> 
    <ul> 
    <li><a href="#">Link A</a></li> 
    <li><a href="#">Link B</a></li> 
    <li><a href="#">Link C</a></li> 
    </ul> 
</div> 
</body>

He estado buscando en la .Append() , .appendTo(), .prepend() y .prependTo() funciones pero no han tenido suerte con esto en la práctica. También miré las funciones .parent() y .parents(), pero parece que no puedo codificar una solución viable. También consideré cambiar el CSS para que los elementos estén absolutamente posicionados, pero para ser sincero, la página está configurada con elementos fluidos por todas partes, y realmente quiero que estos elementos floten en sus nuevos padres.

Cualquier ayuda con esto es muy apreciada.

Fuente

2010-04-08 Jurgen

Todas las funciones de manipulación DOM que ha enumerado deberían funcionar bien. Agregar un elemento DOM a un padre diferente lo mueve a la nueva posición manteniendo todos los eventos intactos. ¿Qué es exactamente lo que no funciona para ti? Hay un error? – Anurag

$('#parent2').prepend($('#table1_length')).prepend($('#table1_filter'));

no funciona para usted? Creo que debería ...

Fuente

2010-04-08 00:56:14

Fue un problema de nomenclatura. Mi ejemplo anterior funciona bien. Las identificaciones reales de los campos tenían múltiples -s y -s, y no estaba seleccionando el elemento porque la identificación no coincidía. Gracias. – Jurgen

Ver solución de eric –

-5

Prueba esto:

var kids = $('#table1_wrapper').children(); 
$.each(kids, function(){ 
    $('#table1_wrapper').remove($(this)); 
    $('#anotherdiv').append($(this)); 
});

Fuente

2010-04-08 00:46:48 Ben

+11

llamando a 'eliminar' eliminará todos los controladores de eventos y los datos asociados del nodo. – Anurag

Sobre la base de las respuestas proporcionadas, decidí hacer un plugin rápida de hacer esto:

(function($){ 
    $.fn.moveTo = function(selector){ 
     return this.each(function(){ 
      var cl = $(this).clone(); 
      $(cl).appendTo(selector); 
      $(this).remove(); 
     }); 
    }; 
})(jQuery);

Uso:

$('#nodeToMove').moveTo('#newParent');

Fuente

2012-01-04 12:50:56 Jage

Este método de clonación de los elementos no los mueve. específicamente si tiene una tienda en una variable $ ('# nodeToMove') antes de que el moveTo Call no funcione más – Roberto

¡Gracias! : D esto se guarda para siempre en mi lista! –

@Jage ¿por qué no utilizar la sintaxis de JQuery? $ ('# nodeToMove'). appendTo ('# newParent'); http://api.jquery.com/appendto/ –

264

como la respuesta de Jage elimina el elemento por completo, incluidos los manejadores de eventos y los datos, estoy agregando una solución simple que no hace eso, gracias a la función detach.

var element = $('#childNode').detach(); 
$('#parentNode').append(element);

Editar:

Igor Mukhin sugirió una versión aún más corta en los comentarios a continuación:

$("#childNode").detach().appendTo("#parentNode");

Fuente

2012-10-18 11:30:40

esta es la mejor solución, porque el detach() + append() no clonará el elemento sino que lo moverá a la nueva ubicación. Los eventos y los datos asociados no se perderán de esta manera –

esto debe marcarse como respuesta. – Daniel

+49

Aún más corto '$ (" # childNode "). Detach(). AppendTo (" # parentNode ");' –

145

Detach es innecesaria.

La respuesta (a partir de 2013) es simple:

$('#parentNode').append($('#childNode'));

Según http://api.jquery.com/append/

También puede seleccionar un elemento de la página e insertarlo en otra:

$ ('. contenedor').append ($ ('h2'));

Si un elemento seleccionado de esta manera se inserta en una sola ubicación en otro lugar en el DOM, se moverá al destino (no clonado).

Fuente

2013-04-29 17:49:20 JackArbiter

Cómo mover el elemento hijo de uno de los padres a otro usando jQuery

Respuesta

Cuestiones relacionadas