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

Posted 2023-02-16

【中文标题】仅附加 4 个 div，其余 div 在另一部分中

【英文标题】：Append only 4 divs and the remaining divs in another section

【发布时间】：2019-09-16 18:25:51

【问题描述】：

假设有一个包含 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>

【问题讨论】：

一般来说，当人们为解决提问者的问题付出一些努力时，Stack Overflow 会很感激。例如，请参阅How to Ask，其中第一部分的标题为“搜索和研究”。

哦，我明白了。我将添加一些我在以后的问题中尝试过的示例。谢谢你告诉我！

【参考方案1】：

我希望这段代码对你有用。我还做了一个演示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>

【讨论】：

请注意，您可以使用 Stack Snippets 在 Stack Overflow 上提供可运行的演示，这样人们就不必导航到另一个站点。

非常感谢 :) 我多次使用此代码。我在获取整个 div（不仅仅是 div 内的内容）时遇到了麻烦，发现只使用了 $("#section-"+section_count).append(this);并删除 $(this).remove();也可以。再次感谢您！