Comment déplacer l'élément enfant d'un parent à un autre en utilisant jQuery [dupliquer]
cette question a déjà une réponse ici:
- comment déplacer un élément dans un autre élément? 13 Réponses
j'utilise le plugin jQuery DataTables . Je voudrais déplacer la zone de recherche.dataTables_filter) et nombre d'enregistrements à afficher déroulante.( dataTables_length) à partir de leur élément parent (.dataTables_wrapper) à un autre div sur ma page sans perdre aucun comportement javascript enregistré. Par exemple, la boîte de recherche a une fonction attachée à l'événement 'keyup' et je veux la garder intacte.
le DOM ressemble à ceci:
<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>
C'est ce à quoi je voudrais que le DOM ressemble après le mouvement:
<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>
j'ai regardé le .annexer(), .appendTo (),.prepend() et .prependTo () fonctionne mais n'a pas eu de chance avec ceux-ci dans la pratique. J'ai aussi regardé le .parent() et .parents() fonctionne, mais ne semble pas pouvoir coder une solution réalisable. J'ai également envisagé de changer la CSS de sorte que les éléments soient absolument positionnés - mais pour être Franc, la page est configurée avec des éléments fluides partout, et je veux vraiment que ces éléments soient flottés dans leurs nouveaux parents.
toute aide à cet égard est très appréciée.
5 réponses
$('#parent2').prepend($('#table1_length')).prepend($('#table1_filter'));
ne marche pas pour vous? Je pense qu'il devrait...
comme la réponse de Jage supprime complètement l'élément, y compris les gestionnaires d'événements et les données, j'ajoute une solution simple qui ne fait pas cela, grâce à la fonction detach .
var element = $('#childNode').detach();
$('#parentNode').append(element);
Edit:
Igor Mukhin a suggéré une version encore plus courte dans les commentaires ci-dessous:
$("#childNode").detach().appendTo("#parentNode");
Detach est inutile.
la réponse (à partir de 2013) est simple:
$('#parentNode').append($('#childNode'));
selon http://api.jquery.com/append/
Vous pouvez également sélectionner un élément sur la page, et l'insérer dans une autre:
$('.container').annexe ($('h2'));
si un élément sélectionné de cette façon est insérée dans un seul emplacement ailleurs dans le DOM, il sera transféré dans la cible (non cloné).
basé sur les réponses fournies, j'ai décidé de faire un plugin rapide pour faire ceci:
(function($){
$.fn.moveTo = function(selector){
return this.each(function(){
var cl = $(this).clone();
$(cl).appendTo(selector);
$(this).remove();
});
};
})(jQuery);
Utilisation:
$('#nodeToMove').moveTo('#newParent');
essayez ceci:
var kids = $('#table1_wrapper').children();
$.each(kids, function(){
$('#table1_wrapper').remove($(this));
$('#anotherdiv').append($(this));
});