gpt4 book ai didi

jquery - 如何使用 jQuery 将子元素从一个父元素移动到另一个父元素

转载 作者:IT王子 更新时间:2023-10-29 03:24:30 25 4
gpt4 key购买 nike

<分区>

我正在使用 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 以便元素绝对定位 - 但坦率地说,页面设置为到处都是流动元素,我真的希望这些元素在它们的新父元素中 float 。

非常感谢任何帮助。

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com