jQueryで大きなHTMLブロックを複製/追加しますが、内部変数を変更しますか？

Question

私はクローンを作成し、選択ボックスの値に基づいて追加する必要がある大きなHTMLブロックを持っています。これはそのまま動作しますが、実際のHTMLブロックを使用する代わりに、クローンを使用して特定のコンテンツを動的に変更できるかどうかを知りたかったのです。

HTML：

<select id="guestNum"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
</select> 
<div class="group-sizing"> 
    <div class='form-group row border'> 
     <div class='inner'> 
      <h3>Guest 1 Welcome</h3> 
      <div class='select'> 
       <select class='form-control' id='guest1'> 
        <option value='New' selected>New</option> 
        <option value='Existing'>Existing</option> 
       </select> 
      </div> 
     </div> 
     <div class='inner'> 
      <h3>Date</h3> 
      <div class='date'> 
       <div class='inner'> 
        <p>April 1</p> 
        <p>No Guests</p> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

JS：

var comDate = $("<div class='inner'>\ 
        <p>April 1</p>\ 
        <p>No Guests</p>\ 
       </div>\ 
       <div class='inner'>\ 
        <p>April 2</p>\ 
        <p>Guests Welcome</p>\ 
       </div>"); 
$("#guestNum").change(function(){ 
    var count = $(this).val(); 
    $(".group-sizing .form-group:gt("+(count-1)+")").remove(); 
    for (var i = $(".group-sizing .form-group").length; i < count; i++){ 
     $("<div class='form-group row border'>\ 
     <div class='inner'>\ 
      <h3>Guest " + (i+1) + " Welcome</h3>\ 
      <div class='select'>\ 
       <select class='form-control' id='guest" + (i+1) + "'>\ 
        <option value='New' selected>New</option>\ 
        <option value='Existing'>Existing</option>\ 
       </select>\ 
      </div>\ 
     </div>\ 
     <div class='inner'>\ 
      <h3>Date</h3>\ 
      <div class='date'>" + comDate + "</div>\ 
     </div>\ 
    </div>").appendTo(".group-sizing"); 
    } 
}); 

私はすでに、ページ上のコードのブロックを含んでいるので、私は必要なの変更、私は私が持っているものだけで複製することができるかどうかを知りたいですそれから、js内のすべてのHTMLを再び持たずにそのようにします。

Here's a fiddle

Answer 1

私はこれはおそらく正確に何をしたいが、HERESにあなたがHTMLのクローンを作成し、内部の変数を挿入する方法の例ではありません知っています。

うまくいけば、正しい方向にあなたを導いてくれるでしょう。

これもページになる可能性がありますが、わかりやすく表示するように設定しました。

<div id="template" style="display:none;"> 
    <div class="group-sizing"> 
    <div class="form-group row border"> 
     <div class="inner"> 
     <h3>Guest {{id}} Welcome</h3> 
     <div class="select"> 
      <select class="form-control" id="guest1"> 
      <option value="New" selected>New</option> 
      <option value="Existing">Existing</option> 
      </select> 
     </div> 
     </div> 
     <div class="inner"> 
     <h3>Date</h3> 
     <div class="date"> 
      <div class="inner"> 
      <p>{{date}}</p> 
      <p>No Guests</p> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

その後{{}}

function findHandleBars(html) { 
    var results = [], re = /{{([^}]+)}}/g, text; 

    while(text = re.exec(html)) { 
    results.push(text[1]); 
    } 

    return results; 

} 

のHTMLをこすりするJS関数を作成し、私は

var template = $('#template').prop('innerHTML'); 

コールを定義し

var guests = [ 
   { 
      "id": "1", 
      "date": "April 1" 
   }, 
   { 
      "id": "2", 
      "date": "April 2" 
   }, 
   { 
      "id": "3", 
      "date": "April 3" 
   } 
]; 

シンプルな 'ゲスト' の配列を作成しましたfi ndHandleBars方法とは...そして、ハンドルバーを通じて客とループをループが見つかり、ここで変数

for(i=0; i< guests.length; i++){ 

var n = template; 

for(i=0; i< guests.length; i++){ 
    var n = template; 

    for(b=0; b<results.length; b++){ 
    var n = n.replace('{{'+results[b]+'}}', guests[i][results[b]]); 
    } 

    $('#body').append(n); 

}; 

と交換フィドルがある変数

var results = findHandleBars(template); 

に配列を設定しhttps://jsfiddle.net/csv8x6xz/15/

Answer 2

jQueryのclone()関数を使用することができます。次に使用する

newguest = $('.group-sizing').eq(0).clone(); newguest.find('span','.guest-welcome').html(i); < < <クローンされた要素の特定の要素を変更するには。

jsFiddleでテストしました。

HTML

<select id="guestNum"> 
<option value="1">1</option> 
<option value="2">2</option> 
<option value="3">3</option> 
<option value="4">4</option> 
<option value="5">5</option> 
</select> 
<div class="group-sizing"> 
    <div class='form-group row border'> 
     <div class='inner'> 
     <h3 class='guest-welcome'>Guest <span>1</span> Welcome</h3> 
     <div class='select'> 
      <select class='form-control' id='guest1'> 
      <option value='New' selected>New</option> 
      <option value='Existing'>Existing</option> 
      </select> 
     </div> 
     </div> 
     <div class='inner'> 
     <h3>Date</h3> 
     <div class='date'> 
      <div class='inner'> 
      <p>April 1</p> 
      <p>No Guests</p> 
      </div> 
     </div> 
     </div> 
    </div> 
</div> 

JS

$("#guestNum").change(function(){ 

    var count = $(this).val(); 
    var len = $('.group-sizing').length; 
    var newguest; 
    var remove = true; 
    for(var i = count; i > 0; i--) 
    { 
    newguest = $('.group-sizing').eq(0).clone(); 
    newguest.find('span','.guest-welcome').html(i); 
    $(this).after(newguest); 
    if(remove) 
    { 
     $('.group-sizing').eq(0).nextAll().remove(); 
     remove = false; 
    } 
    } 

});