I have an array of elements. What I want is to add the elements to a div but strategically. First, add class .wrapperItems then add only 5 elements from the array then if there are more elements left in the array create a new .wrapperItems div and append the remaining array elements. Loop until all the array elements have been appended. How can I achieve this? Thanks in advance.
Take a look at my HTML code below to get an idea of what I want the structure to look like.
*The solution must work with any array length!
let myArray = ['test1', 'test2', 'test3', 'test4', 'test5', 'test6', 'test7', 'test8', 'test9']
$('.wrapper .wrapperItems').html('')
myArray.forEach((elm) => {
//add only 5 "itemCon" then create new ".wrapperItems"
$('.wrapper .wrapperItems').append(`<div class="itemCon"><p>${elm}</p></div>`)
}).wrapper {
display: flex;
flex-direction: column;
width: 100%;
height: fit-content;
background-color: gold;
}
.wrapperItems {
display: flex;
flex-direction: row;
justify-content: center;
width: 100%;
height: fit-content;
background-color: coral;
}
.itemCon {
display: flex;
width: 15%;
height: 7vh;
background-color: pink;
}
.itemCon p {
margin: auto;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="wrapperItems">
<div class="itemCon">
<p>test</p>
</div>
<div class="itemCon">
<p>test</p>
</div>
<div class="itemCon">
<p>test</p>
</div>
<div class="itemCon">
<p>test</p>
</div>
<div class="itemCon">
<p>test</p>
</div>
</div>
<div class="wrapperItems">
<div class="itemCon">
<p>test</p>
</div>
<div class="itemCon">
<p>test</p>
</div>
<div class="itemCon">
<p>test</p>
</div>
<div class="itemCon">
<p>test</p>
</div>
<div class="itemCon">
<p>test</p>
</div>
</div>
</div>>Solution :
This is really a question about how to chunk an array into an array of arrays.
This can be done by mapping and grouping.
let myArray = ['test1', 'test2', 'test3', 'test4', 'test5', 'test6', 'test7', 'test8', 'test9','test10','test11'];
const result = Object.values(
myArray.map( (x,i) => ({grp:Math.floor(i/5),val:x}))
.reduce((acc,i) => {
acc[i.grp] ||= [];
acc[i.grp].push(i.val);
return acc;
},{})
);
console.log(result);At that point, its just a matter of forEach over the outer array where each element will be an array of (up to) 5 items
let myArray = ['test1', 'test2', 'test3', 'test4', 'test5', 'test6', 'test7', 'test8', 'test9']
const result = Object.values(
myArray.map( (x,i) => ({grp:Math.floor(i/5),val:x}))
.reduce((acc,i) => {
acc[i.grp] ||= [];
acc[i.grp].push(i.val);
return acc;
},{})
);
result.forEach((elm) => {
//add only 5 "itemCon" then create new ".wrapperItems"
const $wrapperItems = $("<div>").addClass("wrapperItems");
elm.forEach(item => {
$wrapperItems.append(`<div class="itemCon"><p>${item}</p></div>`)
});
$(".wrapper").append($wrapperItems);
}).wrapper {
display: flex;
flex-direction: column;
width: 100%;
height: fit-content;
background-color: gold;
}
.wrapperItems {
display: flex;
flex-direction: row;
justify-content: center;
width: 100%;
height: fit-content;
background-color: coral;
}
.itemCon {
display: flex;
width: 15%;
height: 7vh;
background-color: pink;
}
.itemCon p {
margin: auto;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
</div>