用javascript中的2个div包装每个第n条内容

Question

我试图围绕API调用生成的每3个内容包装两个div。它应该如下所示：

 <div class="carousel-inner">
      <div class="item carousel-item">
           <div class="row">
                <div class="col-sm-4">
                     <div class="thumb-wrapper">
                          Content Here (1)              
                     </div>
                </div>
                <div class="col-sm-4">
                     <div class="thumb-wrapper">
                          Content Here (2)              
                     </div>
                </div>          
                <div class="col-sm-4">
                     <div class="thumb-wrapper">
                          Content Here (3)              
                     </div>
                </div>
           </div>
      </div>
      <div class="item carousel-item">
           <div class="row">
                <div class="col-sm-4">
                     <div class="thumb-wrapper">
                          Content Here (4)              
                     </div>
                </div>
           </div>
      </div>
 </div>

我整天都在努力，我似乎​​无法做到这一点。另外，我可能没有使用最有效的方法。我希望有人可以告诉我我做错了什么以及如何解决它...而且，我对任何建议都是开放的，简化我的代码。因此，通过此搜索返回4个内容，并且每组3个应该包含在两个div（项目轮播项目和行）中，但在我下面的尝试中，它似乎正确包裹，但它包围4而不是三个然后为第四个带回一个重复的内容，我最后还有一个额外的div ... yikes :)

到目前为止我做了什么：

 <div class="carousel-inner">
      <div class="item carousel-item">
           <div class="row">
                <div class="col-sm-4">
                     <div class="thumb-wrapper">
                          Content Here (1)
                     </div>
                </div>
                <div class="col-sm-4">
                     <div class="thumb-wrapper">
                          <div class="img-box">
                               Content Here (2)
                          </div>
                     </div>
                </div>
                <div class="col-sm-4">
                     <div class="thumb-wrapper">
                          <div class="img-box">
                               Content Here (3)
                          </div>
                     </div>
                </div>
                ***this div should not be here, should have stopped at 3***
                <div class="col-sm-4">
                     <div class="thumb-wrapper">
                          <div class="img-box">
                               Content Here (4)
                          </div>
                     </div>
                </div>
           </div>
      </div>
      <div class="item carousel-item">
           <div class="row">
                <div class="col-sm-4">
                     <div class="thumb-wrapper">
                          <div class="img-box">
                               Content Here (4)
                          </div>
                     </div>
                </div>
           </div>
      </div>
 </div>
 ***extra div shows up at end***
 </div>

这是我使用的代码：

 jQuery.each(ws_ftr, function(index, ftr) {
           if(index % 3 === 0){
                jQuery('.carousel-inner').append('<div class="item carousel-item active"><div class="row">');
           }
           jQuery('.row').append('<div class="col-sm-4"><div class="thumb-wrapper"><div class="img-box">Content Here</div></div></div>');
           if(index % 3 === 0){
                jQuery('.row').append('</div></div>');
           }

Answer 1

你的代码应该是这样的

function createColumnsList(arr) {
  var html = '<div class="row">'; 
  //or another code to start your row like $.append or smth
  $.each(arr, function(index, item) {
    if (index % 3 == 0 && index != 0) {
      html += '</div><div class="row">'; 
     //end and start your row
    }
    html += '<div class="column">' + item + '</div>'; 
    // output your content from array
  });
  html += "</div>"; 
  //end row
  return html;
}

改变它以满足您的需求。希望它能帮到你:)