javascript - 在javascript中用2个div包裹每第n block 内容

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...哎呀:)

到目前为止我所做的事情:

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

更改它以满足您的需求。希望对您有帮助:)