クラスごとに要素を数え、ループを使ってJQueryで項目を動的に表示する方法

Question

私は、スライドをWebサイトに表示されている場所で変更または削除できるスライダーエディターを構築しようとしています。私は内容が編集可能なポップアップでスライダのすべての内容をプッシュしようとしています。

主な内容：：

<div class="carousel-inner" id="nitsslider"> 
      <div class="item active" style="background-image: url(../nits-img/global/templates/himu/slider/slide3.jpg)"> 
       <div class="carousel-caption"> 
        <div> 
         <h2 class="heading animated bounceInDown">'Himu' Onepage HTML Template</h2> 
         <p class="animated bounceInUp">Fully Professional one page template</p> 
         <a class="btn btn-default slider-btn animated fadeIn" href="#">Get Started</a> 
        </div> 
       </div> 
      </div> 
      <div class="item" style="background-image: url(../nits-img/global/templates/himu/slider/slide2.jpg)"> 
       <div class="carousel-caption"> 
        <div> 
         <h2 class="heading animated bounceInDown">Get All in Onepage</h2> 
         <p class="animated bounceInUp">Everything is outstanding </p> <a class="btn btn-default slider-btn animated fadeIn" href="#">Get Started</a> 
        </div> 
       </div> 
      </div> 
      <div class="item" style="background-image: url(../nits-img/global/templates/himu/slider/slide1.jpg)"> 
       <div class="carousel-caption"> 
        <div> 
         <h2 class="heading animated bounceInRight">Fully Responsive Template</h2> 
         <p class="animated bounceInLeft">100% Responsive HTML template</p> 
         <a class="btn btn-default slider-btn animated bounceInUp" href="#">Get Started</a> 
        </div> 
       </div> 
      </div> 
     </div> 

私は、見出し、段落およびボタンコンテンツなどのコンテンツを追加したい、私が直面してる問題は、私はこのようなクラス名でのdivにスライダーをしたあります編集可能なボックス。

<div class="tab-pane active" id="tab_15_1"> 
<div class="portlet-body"> 
    <div class="row"> 
     <div class="caption uplimg"> 
      <i class="fa fa-cloud-upload"></i>Change slide content 
     </div> 
     <div class="clearfix"></div> 
     <div class="form-body"> 
      <label class="control-label col-md-3">Change Image</label> 
      <div class="col-md-4"> 
       <div class="tiles"> 
        <div class="tile image selected"> 
         <div class="tile-body"> 
          <img src="../../assets/admin/pages/media/gallery/image2.jpg" alt=""> 
         </div> 
         <div class="tile-object"> 
          <div class="name"> 
           Media 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="clearfix"></div> 
      <div class="form-group"> 
       <label class="control-label col-md-3">Heading</label> 
       <div class="col-md-6"> 
        <input type="text" class="form-control" maxlength="25" name="defaultconfig" id="maxlength_defaultconfig"> 
        <span class="help-block"> 
    Enter Slider heading. Maxlength is 25 chars.</span> 
       </div> 
      </div> 
      <div class="clearfix"></div> 
      <div class="form-group"> 
       <label class="control-label col-md-3">Content</label> 
       <div class="col-md-6"> 
        <input type="text" class="form-control" maxlength="25" name="defaultconfig" id="maxlength_defaultconfig"> 
        <span class="help-block"> 
    Enter Slider content. Maxlength is 25 chars.</span> 
       </div> 
      </div> 
      <div class="clearfix"></div> 
      <div class="form-group"> 
       <label class="control-label col-md-3">Button text</label> 
       <div class="col-md-6"> 
        <input type="text" class="form-control" maxlength="25" name="defaultconfig" id="maxlength_defaultconfig"> 
        <span class="help-block"> 
    Enter button text. Maxlength is 25 chars.</span> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

は、入力ボックスに値を持っています

動的コンテンツ：

は、私は次の形式でコンテンツを追加したい、私は意味class="item"を取ることによってeach function要素を使用しなければなりません主なコンテンツの

Answer 1

私は配列に値を入れようとし、各ステートメントを実行して値を追加しました。私が使用したコードを以下に示します。

$('#nitsslider > .item').each(function (i) { 
    var sliderimage = []; 
    var sliderheading = []; 
    var sliderpara = []; 
    var sliderbutton = []; 
    sliderimage[i] = $(this).css('background-image').replace(/^url\(['"](.+)['"]\)/, '$1'); 
    sliderheading[i] = $(this).find('h2').text(); 
    sliderpara[i] = $(this).find('p').text(); 
    sliderbutton[i] = $(this).find('a').text(); 

and append the dynamic content.... 

});