Question

我有一个ajax帖子，它从控制器获取数据，我想要做的是为array_chunk的每个元素创建一个div，并将每个块的所有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>

顺便说一下，function 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)正在记录 [Object, Object, Object, Object, Object, Object, Object...]

0: Object 1: Object 2: Object 3: Object 4: Object...

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

这是您的数据吗？

Javascript中的array_chunk和ForLoop，用于在一个div

1 个答案: