Подсчитайте несколько родительских элементов div, к которым добавлены дочерние элементы div - PullRequest
Новая
       20

Подсчитайте несколько родительских элементов div, к которым добавлены дочерние элементы div

0 голосов
/ 25 сентября 2019

Я добавляю множество дочерних элементов div из контейнера div "#originalsection" в несколько новых контейнеров div ".newsection" в зависимости от их класса.У меня возникают проблемы при попытке закодировать механизм подсчета для 4 делений на секцию.

Конкретный код, с которым у меня возникают проблемы, это 

   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 добавляется в любой из div ".newsection", а не подсчитывает количество div в одном div ".newsection".

Я думаю, что решениеписать что-то с эквивалентностью: "if ('#' sectionclass +" # section- "+ section_count) получает добавленный div, div_count + = 1"

Я уверен, что это включает в себя код длины.Я пробовал: 

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

Я все еще начинающий код.Я очень ценю любые объяснения.Большое спасибо!:)

1 Ответ

0 голосов
/ 25 сентября 2019

Прежде всего, вы не должны использовать id как этот id = "section-0".Идентификатор должен быть уникальным.Вы можете поместить это в класс вместо этого.Вы можете хранить счетчик для каждого цвета в объекте и увеличивать его каждый раз, когда добавляете дочерний элемент 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));




        });

    });
...