其中添加了子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的数量。

我认为解决方案正在写与以下内容等效的内容：“如果（'＃'sectionclass +“＃section-” + section_count）附加了div，div_count + = 1“

我确定这涉及到长度代码。我已经尝试过：

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));




        });

    });