我使用的是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元素设置的,我真的希望这些元素浮动在它们的新父元素中。
这方面的任何帮助都是非常感谢的。
发布于 2010-04-08 08:56:15
$('#parent2').prepend($('#table1_length')).prepend($('#table1_filter'));
对你不起作用?我觉得它应该...
发布于 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');
https://stackoverflow.com/questions/2596833
复制相似问题