计算附加了子 div 的多个父 div

Question

我根据类将“#originalsection”div 容器中的许多子 div 附加到多个新的“.newsection”div 容器中。我在尝试为每部分 4 个 div 编写计数机制时遇到了麻烦。

我遇到问题的具体代码是

   div_count += 1;

我想要完成的是：

<div id="originalsection"></div>
<div id="red" class="newsection">
   <div id="section-0" class="child">
      <div class="red all"> A </div>
      <div class="red all"> D </div>
      <div class="red all"> G </div>
      <div class="red all"> J </div>
   </div>
   <div id="section-1" class="child">
      <div class="red all"> K </div>
   </div>
</div>
<div id="blue" class="newsection">
   <div id="section-0" class="child">
      <div class="red all"> B </div>
      <div class="red all"> E </div>
      <div class="red all"> H </div>
      <div class="red all"> I </div>
   </div>
   <div id="section-1" class="child">
      <div class="red all"> L </div>
   </div>
</div>
<div id="green" class="newsection">
   <div id="section-0" class="child">
      <div class="red all"> C </div>
      <div class="red all"> F </div>
   </div>
</div>

我当前的代码是：

<script>
   $(document).ready(function() { 
      var div_count = 0;
      var section_count = 0;
      var $all = $('#all');

      $('div#originalsection div').each(function() {
         var $div = $(this);
         var sectionclass = $div.attr('class').split(' ')[0];

         if ($("#section-"+section_count).length == 0) {
            $('.newsection').append
            ('<div id="section-'+section_count+'" class="child"></section>');
         }
         var $classCount = $('#' + sectionclass + " #section-" + section_count);
         $classCount.append($div);

         // ***TRYING TO FIX THIS CODE BELOW***
         div_count += 1;

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

<div id="originalsection">
   <div class="red all"> A </div>
   <div class="blue all"> B </div>    
   <div class="green all"> C </div>
   <div class="red all"> D </div>
   <div class="blue all"> E </div>
   <div class="green all"> F </div>
   <div class="red all"> G </div>
   <div class="blue all"> H </div>    
   <div class="blue all"> I </div>
   <div class="red all"> J </div>
   <div class="red all"> K </div>
   <div class="blue all"> L </div>  
</div>
<!--<div id="all" class="newsection"></div>-->
<div id="red" class="newsection"></div>
<div id="blue" class="newsection"></div>
<div id="green" class="newsection"></div>

<style>
   #red { color: red; }
   #green { color: green; }
   #blue { color: blue; }
   .child { border: 1px solid green; width: 50px; margin: 5px;}
</style>

---

就像我上面提到的，我要更改的代码是

   div_count += 1;

因为（我认为）每次将 div 附加到任何“.newsection”div 中时它都会计数，而不是计算单个“.newsection”div 中的 div 数。

我认为解决方案是写一些等价的东西： "if ('#' sectionclass + "#section-" + section_count) 得到一个追加的 div，div_count += 1"

我确定这涉及.length 代码。我试过了：

var $classCount.find('div') = $('#' + sectionclass + " #section-" + section_count);
if ($classCount.length += 1 ) {
   div_count += 1;
}

我还是一个初学者代码。我非常感谢任何解释。非常感谢你！ :)

Answer 1

首先你不应该使用像id="section-0"这样的id。 ID 应该是唯一的。你可以把它放到一个类中。您可以在对象中存储每种颜色的计数器，并在每次附加子 div 时将其递增。这是代码

jQuery(document).ready(function () {
        var counter = {};
        var i = 0;
        $('#originalsection div').each(function () {
            var sectionclass = $(this).attr('class').split(' ')[0];
            console.log(sectionclass);
            if (typeof (counter[sectionclass]) == 'undefined') {
                counter[sectionclass] = {};
                counter[sectionclass]['color'] = 0;
                counter[sectionclass]['suffix'] = 0;
            } else {
                counter[sectionclass]['color']++;
            }

            if (counter[sectionclass]['color'] % 4 == 0) {
                if (counter[sectionclass]['color'] != 0) {
                    counter[sectionclass]['suffix']++;
                }
                $('#' + sectionclass).append('<div class="child section-' + counter[sectionclass]['suffix'] + '"></div>');

            }

            $('#' + sectionclass + ' .section-' + counter[sectionclass]['suffix']).append($(this));




        });

    });