如何使用jQuery将子元素从一个父元素移到另一个父元素
如何使用jQuery将子元素从一个父元素移到另一个父元素
提问于 2010-04-08 08:33:53
我使用的是jQuery DataTables插件。我想要将搜索框(.dataTables_filter)和要显示下拉列表(.dataTables_length)的记录数从它们的父元素(.dataTables_wrapper)移动到我的页面上的另一个div，而不会丢失任何注册的javascript行为。例如，搜索框有一个附加到'keyup‘事件的功能，我想保持它的完整性。
DOM看起来像这样：
<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>这是我希望DOM在移动后的样子：
<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>我一直在研究.append()、.appendTo()、.prepend()和.prependTo()函数，但在实践中对这些函数一无所知。我还研究了.parent()和.parents()函数，但似乎无法编写出可行的解决方案。我也考虑过改变CSS，这样元素就绝对定位了--但坦率地说，页面是用fluid元素设置的，我真的希望这些元素浮动在它们的新父元素中。
这方面的任何帮助都是非常感谢的。
回答 2
Stack Overflow用户
回答已采纳
发布于 2010-04-08 08:56:15
$('#parent2').prepend($('#table1_length')).prepend($('#table1_filter'));
对你不起作用？我觉得它应该...
Stack Overflow用户
发布于 2012-01-04 20:50:56
根据提供的答案，我决定做一个快速插件来完成这个任务：
(function($){
$.fn.moveTo = function(selector){
return this.each(function(){
var cl = $(this).clone();
$(cl).appendTo(selector);
$(this).remove();
});
};
})(jQuery);用法：
$('#nodeToMove').moveTo('#newParent');页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2596833
复制相关文章
相似问题
腾讯云开发者
