Javaスクリプトループ、カルーセル画像のdivが動作しない

Question

htmlカルーセルの静的なコードは正常に動作しますが、私はdivをjavaスクリプトのループを使用して縦線で表示します。以下の私の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スクリプトコードを、私は画像を追加するとき、それはあなたが初期化されて実行する必要がどのような垂直

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カルーセルクラスにダイナミック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();