Dom*_*Dom 134 jquery jquery-plugins
我正在使用jQuery DataTables插件.我想将搜索框(.dataTables_filter)和记录数从其父元素(.dataTables_wrapper)显示下拉列表(.dataTables_length)到我页面上的另一个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以便元素绝对定位 - 但坦率地说,页面设置了流畅的元素,我真的希望这些元素能够在他们的新父母中浮动.
对此有任何帮助非常感谢.
eri*_*hak 297
由于Jage的答案完全删除了元素,包括事件处理程序和数据,我正在添加一个简单的解决方案,由于该detach功能,它不会这样做.
var element = $('#childNode').detach();
$('#parentNode').append(element);
编辑:
Igor Mukhin在下面的评论中提出了一个更短的版本:
$("#childNode").detach().appendTo("#parentNode");
Jac*_*ter 158
Detach 没必要.
答案(截至2013年)很简单:
$('#parentNode').append($('#childNode'));
根据http://api.jquery.com/append/
您还可以在页面上选择一个元素并将其插入另一个元素:
$(".容器 ')附加($(' H2' ));
如果以这种方式选择的元素被插入到DOM中其他位置的单个位置,则它将被移动到目标中(未克隆).
Ale*_*ord 39
$('#parent2').prepend($('#table1_length')).prepend($('#table1_filter'));
不适合你吗？我认为应该......
Jag*_*age 34
根据提供的答案,我决定制作一个快速插件来执行此操作:
(function($){
$.fn.moveTo = function(selector){
return this.each(function(){
var cl = $(this).clone();
$(cl).appendTo(selector);
$(this).remove();
});
};
})(jQuery);
用法:
$('#nodeToMove').moveTo('#newParent');