如何使用jQuery将每4个元素移动到另一个容器中
How to move every 4 elements to another container with jQuery?
所以我有这个标记:
<section class="oldContainer">
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
</section>
<section class="newContainer"></section>
<section class="newContainer"></section>
我想把所有的<article>'s
从oldContainer
移到newContainer
,但这样newContainer
每个可以有不超过4个<article>'s
。jQuery如何做到这一点?在这种情况下,我只知道如何包装元素,但不知道如何移动它们:)
如果newcontainer元素已经存在,那么您可以将它们移动到
var $as = $('.oldContainer article');
$('.newContainer').each(function(i) {
$(this).append($as.slice(i * 4, (i + 1) * 4))
});
.oldContainer {
min-height: 5px;
border: 1px solid red;
margin-bottom: 5px;
}
.newContainer {
min-height: 5px;
border: 1px solid green;
margin-bottom: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="oldContainer">
<article>1</article>
<article>2</article>
<article>3</article>
<article>4</article>
<article>5</article>
<article>6</article>
</section>
<section class="newContainer"></section>
<section class="newContainer"></section>
您可以使用appendTo
在.newContainer
中移动article
var i = 0; // To get the .newContainer by index
// Run until there is no article left in .oldContainer
while ($('.oldContainer article').length) {
$('.oldContainer article:lt(4)').appendTo($('.newContainer').eq(i++));
// Get first four `article` and move it to the .newContainer element
}
DEMO
相关文章:
- 如何在android中使用phonegap将文件从一个文件夹移动/复制到另一个文件夹
- jQuery-将列表项的一个元素移动到同一项的另一个元素中+对我的列表中的每个项执行此操作
- 通过DRAGGABLE将一个DIV移动到另一个DIF下?(CSS,JQuery)
- 计算从一个对象到另一个对象的路径并沿其移动
- 文件的节点自动化移动到另一个文件夹中
- 用于文件移动到另一个文件夹的Javascript自动化
- 当我将子项从一个父项移动/复制到另一个父级时,如何重新计算显示
- 如何使用jquery将所选项目从一个下拉组列表(optgroup)移动到另一个下拉列表(optgroup)
- 在React中将方法从一个组件移动到另一个组件,并且仍然可以在原始组件中使用
- 如何自动从一个页面移动到另一个页面,然后回到 html 表格中分页的第一页
- Jquery-将图像从一个元素移动到另一个元素
- 当我在另一个画布上同时拖动另一个图像时,如何移动图像
- Azure移动服务;插入到另一个表&呼叫'插入'剧本
- Javascript-通过按下另一个元素来移动元素
- 如何根据单元格中的值将一行从一个谷歌电子表格移动到另一个
- 使用javascript和php,在单击图像时将其移动到另一个位置
- 如何使用Gulp编译并移动到另一个文件夹一堆sass文件
- 将系统.js文件从jspm_packages移动到另一个文件夹,无法解析配置中的软件包
- 当现有 Google 标记移动到另一个位置时,如何更新新的纬度和经度
- 流星 - 将数据从一个集合移动到另一个集合