Come spostare l'elemento figlio da un genitore all'altro utilizzando jQuery

116

Sto utilizzando il plug-in jQuery DataTables. Vorrei spostare la casella di ricerca (.dataTables_filter) e il numero di record per visualizzare il menu a discesa (.dataTables_length) dall'elemento padre (.dataTables_wrapper) a un altro div sulla mia pagina senza perdere alcun comportamento javascript registrato. Ad esempio, la casella di ricerca ha una funzione associata all'evento "keyup" e voglio mantenerlo intatto.Come spostare l'elemento figlio da un genitore all'altro utilizzando jQuery

Il DOM è simile al seguente:

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

Questo è quello che vorrei DOM a guardare come dopo lo spostamento:

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

Ho cercato al .Append() , .appendTo(), .prepend() e .prependTo() funzionano ma non hanno avuto fortuna con questi in pratica. Ho anche guardato le funzioni .parent() e .parents(), ma non riesco a codificare una soluzione praticabile. Ho anche pensato di cambiare il CSS in modo che gli elementi siano posizionati in modo assoluto, ma per essere sinceri la pagina è impostata con elementi fluidi dappertutto, e voglio davvero che questi elementi vengano fatti galleggiare nei loro nuovi genitori.

Qualsiasi aiuto con questo è molto apprezzato.

fonte

2010-04-08 Jurgen

Tutte le funzioni di manipolazione DOM elencate devono funzionare correttamente. L'aggiunta di un elemento DOM a un altro genitore lo sposta nella nuova posizione mantenendo intatti tutti gli eventi. Cosa non funziona esattamente per te? C'è un errore? – Anurag

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

non funziona per voi? Penso che dovrebbe ...

fonte

2010-04-08 00:56:14

Era un problema di denominazione. Il mio esempio sopra funziona bene. L'id effettivo dei campi aveva multiple e _'s in esso, e non stavo selezionando l'elemento perché l'id non corrispondeva. Grazie. – Jurgen

Vedere la soluzione di eric –

-5

Prova questo:

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

fonte

2010-04-08 00:46:48 Ben

+11

chiamando 'remove' rimuoverà tutti i gestori di eventi e i dati associati dal nodo. – Anurag

In base alle risposte fornite, ho deciso di fare una rapida plugin per fare questo:

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

Usage:

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

fonte

2012-01-04 12:50:56 Jage

Questo metodo di clonazione degli elementi non li sposta. in particolare se hai negozio in una variabile $ ('# nodeToMove') prima che la chiamata moveTo non funzioni più – Roberto

Grazie! : D questo è salvato per sempre sulla mia lista! –

@Jage perché non utilizzare la sintassi JQuery? $ ('# NodeToMove') appendTo ('# newParent.'); http://api.jquery.com/appendto/ –

264

Come risposta di Jage rimuove l'elemento completamente, inclusi gestori di eventi e dati, sto aggiungendo una soluzione semplice che non lo fa, grazie alla funzione detach.

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

Edit:

Igor Mukhin ha suggerito una versione ancora più breve nei commenti qui sotto:

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

fonte

2012-10-18 11:30:40

questa è la soluzione migliore, perché il detach() + append() non clonerà l'elemento ma lo sposterà nella nuova posizione. Gli eventi e i dati associati non andranno persi in questo modo –

questo dovrebbe essere contrassegnato come risposta. – Daniel

+49

Ancora più corto '$ (" # childNode "). Detach(). AppendTo (" # parentNode ");' –

145

Detach è inutile.

La risposta (a partire dal 2013) è semplice:

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

Secondo http://api.jquery.com/append/

È anche possibile selezionare un elemento della pagina ed inserirla in un altro:

$ ('contenitore').accodare ($ ('H2'));

Se un elemento selezionato in questo modo viene inserito in una singola posizione altrove nel DOM, verrà spostato nella destinazione (non clonato).

fonte

2013-04-29 17:49:20 JackArbiter

Come spostare l'elemento figlio da un genitore all'altro utilizzando jQuery

risposta

Problemi correlati