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每个<article>'s不得超过4 /System/Library/PrivateFrameworks/Apple80211.framework/Versions/Current/Resources/airport 。如何用jQuery完成？我只知道如何在这种情况下包装元素，但不能移动它们：）

Answer 1

如果新容器元素已经存在，那么你可以移动它们

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>

Answer 2

您可以使用appendTo移动article

中的.newContainer

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

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

2 个答案: