html JavaScript -每x次创建一个foreach循环的div

2izufjch  于 7个月前  发布在  Java
关注(0)|答案(3)|浏览(99)

我有一个foreach循环,我需要每2个循环在数据输出周围 Package 一个divclassName='row'

这是我的循环

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

字符串

这才是真正的样子

<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

eulz3vhy

eulz3vhy1#

你能试试这个吗:

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 = ""
        } 

    });
}

字符串

dfty9e19

dfty9e192#

你的函数可以这样做:

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

字符串

rjzwgtxy

rjzwgtxy3#

如果数据中的元素不能很好地除以行中的元素数,那么当前的答案可能会有问题。
通过使用DocumentFragment,我们可以只更新DOM一次,通过创建和追加元素,我们可以做到这一点,而不必担心打开和关闭标记的数据,不均匀地除以行元素的数量。

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>

相关问题