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

时间:2018-03-29 01:11:16

标签: javascript arrays carousel

我试图围绕API调用生成的每3个内容包装两个div。它应该是这样的:

from keras.utils import to_categorical  

train_y = to_categorical(train_y, num_classes=2)
test_y = to_categorical(test_y, num_classes=2)

aug = ImageDataGenerator(...) #your ImageDataGenerator

Model = model.fit_generator(aug.flow(train_x,tain_y, batch_size=32), 
            validation_data=(test_x,test_y))

我整天都在努力,但我似乎无法做到这一点。另外,我可能没有使用最有效的方法。我希望有人可以告诉我我做错了什么以及如何解决它...而且,我对任何建议都是开放的,简化我的代码。因此,通过此搜索返回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">
                          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>

以下是我使用的代码:

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

1 个答案:

答案 0 :(得分: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;
}

根据您的需要进行更改。希望它能帮助你:))