Question

（在底部的编辑部分，我已经包含了我最接近的代码）

说明：我有一个ajax帖子，它从控制器获取数据。成功之后，每个帖子都有一个for循环：

success: function(data) {
     var posts = data['data'];
     var postsCount = data['per_page'];
     var frag = document.createDocumentFragment();

     for(i=0; i < postsCount; i++){
         frag.appendChild(postElem(posts));
     }
    document.getElementById('content').appendChild(frag);
}

我还有另一个函数function postElement()创建eachPost div，将子div添加到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;
}

直到这里才能完美运作

我在html中工作的结构，也希望在javascript中实现如下：

<div id="content">
   @foreach (array_chunk($posts->all(), 3) as $row)
      <div class="row eachRow">
         @foreach($row as $post)
            <div class="col-md-3 eachPost">
                   <!-- rest of the code -->

经过一些研究，我发现我可以实现这样的array_chunk：

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

      // my other `for`.

}

然而，无论我尝试过什么，我都无法弄清楚如何实现我在HTML中取得的成就。我无法在javascript中导入eachRow位。这样做的方法是什么？是因为document.createDocumentFragment()位？

编辑：我尝试了什么，但我想达到的目标无效：

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

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

在这部分中，它会将内容添加到frag中。它创建了一个div。（参见底部视图：来源）

这会在每行内部创建一个帖子，就像一行直线，而不是一行中的3个帖子。

我想要实现的目标

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

顶部的代码正在生成：

<div class="row eachRow">_</div>     
<div class="row eachRow">_</div>
  <!-- for each bit -->
<div class="eachPost>_</div>
<div class="eachPost>_</div>
<div class="eachPost>_</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>

Javascript中的array_chunk，在使用ForLoop

0 个答案: