Javascript中用于在一个div中追加多个元素的数组\u chunk和ForLoop

我有一篇ajax文章，它从controller获取数据，我想做的是为array_chunk的每个元素创建一个div，并将每个块的所有div附加到一个div中（请参见下面的html）

---

请注意，

数据

和

帖子

都是对象<代码>控制台日志（posts）正在记录

[对象，对象，对象，对象，对象，对象，对象…]

0:对象

1:对象

2:对象

3:对象

4:对象…

0: Object:
     ->name
     ->email // (etc.. It's user table)

     ->posts // (user hasMany() post // eloquent relationship)
         ->created_at
         ->id
         ->comments
              ->id
              ->body
              ->created_at (etc..)

      ->user_profile (also eloquent relationship)
           ->photo
           ->about 

试试这个代码

风险值数据=[“1号岗位”、“2号岗位”、“3号岗位”、“4号岗位”、“5号岗位”、“6号岗位”、“7号岗位”、“8号岗位”、“9号岗位”、“10号岗位”]

解释

您需要将数据数组拆分为多个数组，每个数组最多有3个post。现在，您可以轻松地将这些元素附加到每个

行

div

更新

var data = [];
for (var i = 0; i < 10; i++) {
    var obj = {};
    obj.name = "Name " + i;
    obj.posts = [];
    for (var j = 0; j < 5; j++) {
        var post = { id: j };
        obj.posts.push(post);
    }

    data.push(obj);
}

var数据=[]；
对于（变量i=0；i<10；i++）{
var obj={}；
obj.name=“name”+i；
obj.posts=[]；
对于（var j=0；j<5；j++）{
var post={id:j}；
目标柱推（柱）；
}
数据推送（obj）；
}

---

这是您的数据吗？

您想在每个

div

中插入3个

div

吗？是的，这就是我想要实现的目标。由于我的数据是一个对象，我很难根据我的情况调整您的示例。我尝试将其转换为数组，但效果不好，因为我无法使用此类调用访问内容-

posts[I]['about']['created_at']

。你还有其他建议吗？@senty你能提供一个数据对象的例子吗？我在问题中添加了这一部分。在该示例中，假设我希望使用类似于

posts[I][comments][1][body]

的内容来访问每个对象。但是由于帖子是一个对象，我一直在努力适应你的例子。@senty所以，你的数据将是，

data=[object，object，object..]

而不是

var data=[“Post 1”，“Post 2”，“Post 3”，“Post 4”，“Post 5”，“Post 6”，“Post 7”，“Post 8”，“Post 9”，“Post 10”]

？是的，这是正确的，所以我适应不了你的例子。

<div class="row eachRow">
   <div class="eachPost>_</div>
   <div class="eachPost>_</div>
   <div class="eachPost>_</div>
</div>
<div class="row eachRow">
   <div class="eachPost>_</div>
   <div class="eachPost>_</div>
   <div class="eachPost>_</div>
</div>

function postElem(posts){
   var eachPost = document.createElement('div');
   eachPost.className = "col-md-4 eachPost";

       //and a big chunk of code that finally appends into `eachPost`.

  return eachPost;
}

0: Object:
     ->name
     ->email // (etc.. It's user table)

     ->posts // (user hasMany() post // eloquent relationship)
         ->created_at
         ->id
         ->comments
              ->id
              ->body
              ->created_at (etc..)

      ->user_profile (also eloquent relationship)
           ->photo
           ->about 

var groupedData = [];
 var groupIndex = 0;
 $.each(data, function (index, post) {
     if (index == 0) {
         groupedData[groupIndex] = [];
     }
     else if (index % 3 == 0) {
         groupIndex++;
         groupedData[groupIndex] = [];
     }
     groupedData[groupIndex].push(post);
 });
 $.each(groupedData, function (index, value) {
     var eachRow = document.createElement('div');
     eachRow.className = "row eachRow";
     $.each(value, function (postIndex, post) {
         var postElement = document.createElement('div');
         postElement.className = "eachPost";
         eachRow.appendChild(postElement);
     });

     document.getElementById('content').appendChild(eachRow);
 });

var data = [];
for (var i = 0; i < 10; i++) {
    var obj = {};
    obj.name = "Name " + i;
    obj.posts = [];
    for (var j = 0; j < 5; j++) {
        var post = { id: j };
        obj.posts.push(post);
    }

    data.push(obj);
}