recorrer - Cómo mover elementos secundarios de un padre a otro usando jQuery
obtener elementos de un formulario jquery (5)
Esta pregunta ya tiene una respuesta aquí:
- ¿Cómo mover un elemento a otro elemento? 12 respuestas
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.
El DOM se ve así:
<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 fuera el DOM 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 mirando las funciones .append (), .appendTo (), .prepend () y .prependTo () pero no he 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.
Como la respuesta de Jage elimina por completo el elemento, incluidos los manejadores de eventos y los datos, agrego una solución simple que no lo hace, gracias a la función de 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");
En función de las respuestas proporcionadas, decidí hacer un complemento rápido para 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'');
Prueba esto:
var kids = $(''#table1_wrapper'').children();
$.each(kids, function(){
$(''#table1_wrapper'').remove($(this));
$(''#anotherdiv'').append($(this));
});
$(''#parent2'').prepend($(''#table1_length'')).prepend($(''#table1_filter''));
no funciona para ti? Creo que debería ...
Detach es innecesario.
La respuesta (a partir de 2013) es simple:
$(''#parentNode'').append($(''#childNode''));
De acuerdo con http://api.jquery.com/append/
También puede seleccionar un elemento en la página e insertarlo en otro:
$ (''. container''). append ($ (''h2''));
Si un elemento seleccionado de esta manera se inserta en una única ubicación en cualquier parte del DOM, se moverá al objetivo (no clonado).