印刷されていませんロード後のHTML

Question

たとえば、客室を選択した後、このホテルを予約している場合は、[s]フォームに必要事項を記入してください。

この例では、あなたが部屋を選択しました。

lenHotel = 1; 
plusCapacity = 2; 

スクリプト：

$(function() { 
for(var i = 0; i < lenHotel; i++) { 
    $("#Step-02").find('#information-box').append(
     "<h4>" + (i + 1) +" .Room Name</h4>" + 
     "<div class=\"box-content\">" + 
     "<div class=\"field-row clearfix\"> " + 
     "<input type=\"text\" placeholder=\"name\" id=\"name\"> " + 
     "</div><div class=\"field-row clearfix\">" + 
     "<div class=\"col-xs-6\"><select id=\"country\">" + 
     "<option value=\"0\">Select Country</option><option value=\"1\">Country name</option><option value=\"2\">Country name</option>" + 
     "</select></div>" + 
     "<div class=\"col-xs-6\">"); 

    if(hotel[i]['plusCapacity'] != 0) { 

     $("#Step-02").find('.col-xs-6').append(
      "<select id=\"addPeople\">" + 
      "<option value=\"0\">add people</option>" 
     ); 

     for(var j = 0; j < hotel[i]['plusCapacity']; j++) { 
      $(".col-xs-6").find('#addPeople').append(
       "<option value=\"' + j + '\">' + j + '</option>" 
      ); 
     } 
    } else { 
     $("#Step-02").find('#information-box').append(
      "<div class=\"col-xs-6\"><select id=\"addPeople\" disabled>" + 
      "<option value=\"0\"> The opt-out add </option>" 
     ); 
    } 
    $("#Step-02").find('#information-box').append("</select></div></div></div><hr />"); 
} 
}) 

私はちょうどこのHTMLにしたい：

<div id="information-box"> 
<h4>1. Room name</h4> 
<div class="box-content"> 
    <div class="field-row clearfix"> 
     <input type="text" placeholder="name" id="name"> 
    </div> 
    <div class="field-row clearfix"> 
     <div class="col-xs-6"> 
      <select id="country"> 
       <option value="0">Select Country</option> 
       <option value="1">country name</option> 
       <option value="2">country name</option> 
      </select> 
     </div> 
     <div class="col-xs-6"> 
      <select id="addPeople"> 
       <option value="0">add people</option> 
       <option value="1">1</option> 
       <option value="2">2</option> 
      </select> 
     </div> 
    </div> 
</div> 
</div> 

しかし、スクリプトから印刷後：二回

<div id="information-box"> 
    <h4>1. Room name</h4> 
    <div class="box-content"> 
     <div class="field-row clearfix"> 
      <input id="name" placeholder="name" type="text"> 
     </div> 
     <div class="field-row clearfix"> 
      <div class="col-xs-6"> 
       <select id="country"> 
        <option value="0">Select country</option> 
        <option value="1">country name </option> 
        <option value="2">country name</option> 
       </select><select id="addPeople"> 
        <option value="0">add people</option> 
       </select> 
      </div> 
      <div class="col-xs-6"> 
       <select id="addPeople"> 
        <option value="0">add people</option> 
       </select> 
      </div> 
     </div> 
    </div> 
    <hr> 
</div> 

！ print addPeople ...何が問題なのですか？

Answer 1

クラスセレクタを使用して、すべてのDOMを見つける問題col-xs-6関連するクラス。

は、あなたの場合、あなたはDOMで2試合を見つけ .find()クエリ機能を持っており、そのあなたが見る理由は、あなたが COL-XS-6の同じクラス名を持つ2つの場所、インチ

あなたがデータを配置したい場所に照会を示すために、試してみてください。

$("#Step-02").find('.col-xs-6').last().append(
     "<select id=\"addPeople\">" + 
     "<option value=\"0\">add people</option>" 
); 

Last - ここにあなたを助けることができます。

code example

Answer 2

最初のルックでは、コードにいくつかの問題があります。

jQueryは、コードをどこに追加しようとしているのかを理解させるべきです。 jQueryは最初の要素を見つけてそこに追加するだけなので。

.eq()を使用して、col-xs-6のインデックスを検索してください。代わりに、まだ

$("#Step-02").find('.col-xs-6').append(
    "<select id=\"addPeople\">" + 
    "<option value=\"0\">add people</option>" 
); 

の

$("#Step-02").find('.col-xs-6:eq(1)')、私はあなたがループの中で、あなたのDOMを操作することをお勧めしません。変数をStringとして使用し、ループ内で連結してからそれを追加する必要があります。

例FYI

for(var i = 0; i < lenHotel; i++) { 
    var tempString = ""; 
    tempString += "<div>"; 
    tempString += "<select></select>"; 
    tempString += "</div>"; 

    //Append to the container 
    $('.container').append(tempString); 
} 

、これはループの中で長いHTMLを追加する方法についての一例であり、あなたはあなたの必要性につき、必要に応じて変更を行うことができます。