java腳本循環，傳送帶圖像div不工作

Question

html carousel靜態代碼工作正常，但是當我使用java腳本循環顯示的垂直線時追加div。下面是我的html靜態代碼

<section id="feature" class=""> 
     <div class="container"> 
     <div class="row"> 
     <div class="col-md-12"> 
     <div class="rest-head"> 
      <p><span class="h-3 gray">Name</span></p> 
      <p><span class="h-4 gray">text</span></p> 
     </div> 

      <div class="carousel"> 
      <div class="carousel-cell"><a href=""><img src="http://placehold.it/350x150" /></a> 
      <div class="slide-footer"> 
      <span><h5 class="nomargin ellipsis">text</h5></span> 
      <h5 class="pull-left">text</h5> 
      <h5 class="pull-right"><strong><i class="fa fa-inr"></i>price</strong></h5> 
      </div> 
      </div> 
      <div class="carousel-cell"><a href=""><img src="http://placehold.it/350x150" /></a> 
      <div class="slide-footer"> 
      <span><h5 class="nomargin ellipsis">text</h5></span> 
      <h5 class="pull-left">text</h5> 
      <h5 class="pull-right"><strong><i class="fa fa-inr"></i>price</strong></h5> 
      </div> 
      </div> 
      <div class="carousel-cell"><a href=""><img src="http://placehold.it/350x150" /></a> 
      <div class="slide-footer"> 
      <span><h5 class="nomargin ellipsis">text</h5></span> 
      <h5 class="pull-left">text</h5> 
      <h5 class="pull-right"><strong><i class="fa fa-inr"></i>price</strong></h5> 
      </div> 
      </div> 
      <div class="carousel-cell"><a href=""><img src="http://placehold.it/350x150" /></a> 
      <div class="slide-footer"> 
      <span><h5 class="nomargin ellipsis">text</h5></span> 
      <h5 class="pull-left">text</h5> 
      <h5 class="pull-right"><strong><i class="fa fa-inr"></i>price</strong></h5> 
      </div> 
      </div> 
      <div class="carousel-cell"><a href=""><img src="http://placehold.it/350x150" /></a> 
      <div class="slide-footer"> 
      <span><h5 class="nomargin ellipsis">text</h5></span> 
      <h5 class="pull-left">text</h5> 
      <h5 class="pull-right"><strong><i class="fa fa-inr"></i>price</strong></h5> 
      </div> 
      </div> 
      </div> 
     </div> 
     </div> 
     <hr> 
     </div> 
    </section> 

---

這裏是我的Java腳本代碼，當我追加了圖像的div它的到來垂直向上

for (i = 0; i < object.length; i++) { 
    returnResult='<div class="carousel-cell">'; 
    returnResult+='<a href=""><img src="http://placehold.it/350x150"/></a>'; 
    returnResult+='<div class="slide-footer"><span><h5 class="nomargin 
    ellipsis">'; 
    returnResult+= name1; 
    returnResult+='</h5></span><h5 class="pull-left">'+name2+'%</h5>'; 
    returnResult+='<h5 class="pull-right"><strong><i class="fa fa-inr">'; 
    returnResult+=name3+'</strong></h5></div></div></div>'; 
    $(".carousel").append(returnResult); 
    } 

Answer 1

你需要做的是初始化什麼將動態div添加到傳送帶類後，傳送帶：

將下面的代碼添加到代碼中的for循環後：

$(".carousel").carousel(); 

所以，你的代碼就變成了：

for (i = 0; i < object.length; i++) { 
    returnResult='<div class="carousel-cell">'; 
    returnResult+='<a href=""><img src="http://placehold.it/350x150"/></a>'; 
    returnResult+='<div class="slide-footer"><span><h5 class="nomargin 
    ellipsis">'; 
    returnResult+= name1; 
    returnResult+='</h5></span><h5 class="pull-left">'+name2+'%</h5>'; 
    returnResult+='<h5 class="pull-right"><strong><i class="fa fa-inr">'; 
    returnResult+=name3+'</strong></h5></div></div></div>'; 
    $(".carousel").append(returnResult); 
    } 
$(".carousel").carousel();