加載頁面後不好打印HTML

Question

例如，在選擇房間[s]後，您必須預訂此酒店您必須填寫表單[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> 

兩次！打印addPeople ...有什麼問題？

Answer 1

這裏的問題你使用類選擇器，找到你所有的DOM col-xs-6類相關。

在你的情況下，你有發現在DOM兩場比賽.find()查詢功能，你看到的原因，在兩個地方，在這裏你有COL-XS-6平等的類名。

嘗試表明您查詢到你想要放置數據的地方：

$("#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:eq(1)')代替

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

不過，我不建議你操作的DOM中循環。你應該使用一個變量作爲一個字符串，並在循環中進行連接，然後追加它。

例

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

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

僅供參考，這只是關於如何追加在循環中，你可以做必要的修改，根據自己的需要很長的HTML的例子。