javascript - Javascript 中的 array_chunk 和 For 循环，用于在一个 div 中附加多个元素

Question

我有一个 ajax 帖子，它从 Controller 获取数据，我想做的是为 array_chunk 的每个元素创建一个 div，并将每个单独 block 的所有 div 附加到一个 div 中(请参见下面的 html)。

success: function(data) {
     var posts = data['data'];
     var postsCount = data['per_page'];
     var frag = document.createDocumentFragment();
     var eachRow = document.createDocumentFragment();
     var n,j,tempArray,chunk = 3;

        for (n=0,j=posts.length; n<j; n+=chunk) {
            tempArray = posts.slice(n,n+chunk); 

                  // console.log(tempArray); [object],[object],[object] x5

             for(i=0; i < tempArray.length; i++){
                 frag.appendChild(postElem(tempArray));
             }

            var eachRow = document.createElement('div');
            eachRow.className = "row eachRow";
            eachRow.appendChild(frag);
         }
    document.getElementById('content').appendChild(eachRow);
}

• 此代码正在生成:

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

• 我想要实现的目标

  <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>
  

---

顺便说一句，函数 postElem() 用于附加 eachPost 中的所有其他内容。

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

---

请注意，data 和posts 是对象。 console.log(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 

Answer 1

试试这段代码。

var data = ["Post 1", "Post 2", "Post 3", "Post 4", "Post 5", "Post 6", "Post 7", "Post 8", "Post 9 ", "后 10"]

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

解释

您需要将数据数组拆分为多个数组，每个数组最多包含 3 个帖子。现在您可以轻松地将这些元素附加到每个 row 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);
}

这是你的数据吗？