仅附加 4 个 div，其余 div 在另一部分中

Question

假设有一个部分有 12 个 div。我正在尝试一次将 4 个 div 附加到一个新部分（容器）中。因此，第一部分将附加 4 个 div，然后将 4 个 div 附加到不同的第二部分，然后将 4 个 div 附加到第三部分，依此类推。

这里是初学者 wordpress/jQuery 编码员；我将不胜感激解释 :) 对其他方法持开放态度，但我想拥有这 3 个功能：

1) 一些计数机制使得一个部分最多只能容纳 4 个 div

2) 如果有超过 4 个 div（例如 6 个），则创建一个新部分来容纳剩余的 2 个

3) 添加尚未添加的 div。

从一个部分中的 12 个 div 开始：

  <section>
      <div> 1 </div>
      <div> 2 </div>
      <div> 3 </div>
      <div> 4 </div>
      <div> 5 </div>
      <div> 6 </div>
      <div> 7 </div>
      <div> 8 </div>
      <div> 9 </div>
      <div> 10 </div>
      <div> 11 </div>
      <div> 12 </div>
  </section>

在 JQuery 之后，我希望附加的 div 组织为：

 <section id="FirstSection">
      <div> 1 </div>
      <div> 2 </div>
      <div> 3 </div>
      <div> 4 </div>
  </section>
  <section id="SecondSection">
      <div> 5 </div>
      <div> 6 </div>
      <div> 7 </div>
      <div> 8 </div>
  </section>
  <section id="ThirdSection">
      <div> 9 </div>
      <div> 10 </div>
      <div> 11 </div>
      <div> 12 </div>
  </section>

Answer 1

希望这段代码对你有用。我也做了个demo here.

<section>
    <div> 1 </div>
    <div> 2 </div>
    <div> 3 </div>
    <div> 4 </div>
    <div> 5 </div>
    <div> 6 </div>
    <div> 7 </div>
    <div> 8 </div>
    <div> 9 </div>
    <div> 10 </div>
    <div> 11 </div>
    <div> 12 </div>
</section>
<div id="main"></div>
<script>
    var div_count = 0;
    var section_count = 0;

$('div[id!="main"]').each(function () {
  if ($("#section-"+section_count).length == 0) {
    $('#main').append('<section id="section-'+section_count+'"></section>');
  }

  $("#section-"+section_count)[0].append($(this).html());
  $(this).remove();

  div_count += 1;

  if (div_count > 3) {
    div_count = 0;
    section_count += 1;
  }
});
</script>

仅附加 4 个 div，其余 div 在另一部分中

Append only 4 divs and the remaining divs in another section

html

jquery

append

detach