javascript - 如何使用 jQuery 将每 4 个元素移动到另一个容器？

Question

所以我有这个标记:

<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 来完成此操作？我只知道如何在这种情况下包装元素，但不知道如何移动它们:)

Answer 1

如果 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>