Как я могу добавить div после 5 результатов, полученных из базы данных, были добавлены с помощью jquery?

Question

Я хочу добавить div после каждых пяти результатов из этого кода jquery.

$.each(employees, function(index, employee) {
            $('#employeeList').append('<li>'+
                    '<img src="js/citybus.png" class="list-icon"/>' +
                    '<p class="line1">' + employee.firstName + '</p>' +
                    '<p class="line2">' + difference +'</p>' +
                    '<center><button onclick="setReminderClose();" id="reminderSetBox">Reminder Has Been Set</button></center>' +
                    '<button data-diff="' + hoursMin + '" data-name="' + employee.firstName + '" class="bubble" onclick="setReminder(this);">' + '<center><img src="js/bell.png" style="height:15px;width:15px;"/></center>' + '</button></li>');

        });
        setTimeout(function(){
            scroll.refresh();
        });
    });

Answer 1

Вы можете сделать это, написав, если еще проверка состояния

employees = [       
            { "firstName": "Fname1", "lastnName": "lastnName2"  },
            { "firstName": "Fanme2", "lastnName": "lastnName2"  },
            { "firstName": "Fname3", "lastnName": "lastnName2"  },
            { "firstName": "Fname4", "lastnName": "lastnName4"  },
            { "firstName": "Fname5", "lastnName": "lastnName5"  },
            { "firstName": "Fname6", "lastnName": "lastnName6"  },
          ];
$.each(employees, function(index, employee) {
            if(index >0 && (index + 1) % 5 == 0){
				$('#employeeList').append('<div class="green"><li>'+
                   
                    '<p class="line1">' + employee.firstName + '</p>' +
                    '<p class="line2">' + employee.lastnName +'</p>' +
                   '</li></div>');
			}else{
				$('#employeeList').append('<li>'+
                   
                    '<p class="line1">' + employee.firstName + '</p>' +
                    '<p class="line2">' + employee.lastnName +'</p>' +
                   '</li>');
			}

        });
        
    

.green{
  background-color:green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="employeeList">
  
</div>

для значений

index >0 and (index+1) % == 0 (as index starts with '0')

Вот скрипка. Я взял тест пары пар ключ-значение JSON и реализовал его.

https://jsfiddle.net/ba31s05y/14/

Answer 2

Вы можете проверить значение вашего индекса и, если index % 5 === 0, а затем добавить новый div.