html - Javascript - Creating divs to a foreach loop every x times - Stack Overflow

admin管理员组

文章数量:1415484

I have a foreach loop and I need to wrap a div with className='row' around the output of the data every 2 loops.

this is my loop

function getUsers(){
usersjson.users.forEach(function (user,counter) {
//create a DOM element
var div = document.createElement('div');
//add class row every 2 loops
div.className = 'row';
//names
var names = "<p>" + user.first_name +' '+user.last_name+"</p>";
//append to html
div.innerHTML = names;
$('.users_list').append(div);
});
}

This is how it should look like

<div class="row">
<p>John Doe</p>
<p>Jane Doe</p>
</div>

<div class="row">
<p>Marcy Doe</p>
<p>Alfred Doe</p>
</div>

<div class="row">
<p>Judy Doe</p>
<p>Lana Doe</p>
</div>

//...etc

I have a foreach loop and I need to wrap a div with className='row' around the output of the data every 2 loops.

this is my loop

function getUsers(){
usersjson.users.forEach(function (user,counter) {
//create a DOM element
var div = document.createElement('div');
//add class row every 2 loops
div.className = 'row';
//names
var names = "<p>" + user.first_name +' '+user.last_name+"</p>";
//append to html
div.innerHTML = names;
$('.users_list').append(div);
});
}

This is how it should look like

<div class="row">
<p>John Doe</p>
<p>Jane Doe</p>
</div>

<div class="row">
<p>Marcy Doe</p>
<p>Alfred Doe</p>
</div>

<div class="row">
<p>Judy Doe</p>
<p>Lana Doe</p>
</div>

//...etc

• javascript
• html
• foreach

Share Improve this question Follow asked Jan 8, 2021 at 3:01 GroguGrogu 2,52511 gold badge2222 silver badges4545 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Can you try this:

function getUsers(){

    let names = ""
    usersjson.users.forEach(function (user,counter) {

        names = names + "<p>" + user.first_name +' '+user.last_name+"</p>";
        if(counter % 2  == 0) {
            $('.users_list').append(`<div class="row">${names}</div>`);
            names = ""
        } 

    });
}

Your function could do something like this:

function getUsers() {
    for (let i = 0; i < usersjson.users.length; i += 2) {
        //create a DOM element
        var div = document.createElement('div');
        //add class row every 2 loops
        div.className = 'row';
        //names
        var names = `<p>${usersjson.users[i].first_name} ${usersjson.users[i].last_name}</p>`;
        if (usersjson.users[i + 1]) {
            names += `<p>${usersjson.users[i + 1].first_name} ${usersjson.users[i + 1].last_name}</p>`
        }
        //append to html
        div.innerHTML = names;
        $('.users_list').append(div);
    }
}

The current answers may have problems if the elements in the data don't divide nicely by the number of elements in the row.

By using a DocumentFragment, we can update the DOM only once and by creating and appending elements we can do this without having to worry about opening and closing tags for data that doesn't divide evenly by the number of row elements.

function getUsers(usersPerRow){
    let fragment = new DocumentFragment();
    let names = "";
    /*Dummy Data*/
    users = [
      {first_name : "Fist", last_name : "User"},
      {first_name : "Second", last_name : "User"},
      {first_name : "Third", last_name : "User"},
      {first_name : "Fourth", last_name : "User"},
      {first_name : "Fifth", last_name : "User"},
    ];
    let row;
    /*usersjson.*/users.forEach(function (user,counter) {
        /*Check if first iteration or if the row is full*/
        if(counter === 0 || row.querySelectorAll("p").length == usersPerRow) {
          /*Create new row and class*/
          row = document.createElement("div");
          row.classList.add("row");
          /*Append the row to the fragment*/
          fragment.appendChild(row);
        }
        
        /*Update the content of row*/
        row.innerHTML += `<p>${user.first_name} ${user.last_name}</p>`;
    });
    document.getElementById("container").appendChild(fragment)
}

getUsers(2);
getUsers(3);

.row p {display:inline-block; padding-right: 10px;}

<div id="container">
</div>

本文标签： htmlJavascriptCreating divs to a foreach loop every x timesStack Overflow