JQuery追加新的div到其父母

Question

我有以下div標籤與子標籤。

<div class="span6"> 
    <div class="control-group"> 
     <label class="control-label" for="inputEmail">Item Name</label> 
     <div class="controls"> 
      <input type="text" id="inputEmail" class="input-xlarge" placeholder="Enter item name here..."> 
     </div> 
    </div> 
</div> 

我想根據陣列追加孩子<div class="control-group"></div>父<div class="span6"></div>。所以我寫了JavaScript如下。

$.each(categories, function (k, elem) { 
    var options = ''; 
    var options = ' 
    <div class="control-group"> 
     <label for="StockCategory">Category</label> 
     <div class="controls"> 
      <select class="input-xlarge get-category"> 
    '; 
    options +='<option value="">Select Category</option>'; 
    $.each(data, function(key, value) { 
     options += '<option value="' + key + '">' + value + '</option>'; 
    }); 
    options +=' 
      </select> 
     </div> 
    </div>'; 
    $("div.span6").append(options); 
} 

所以我想根據數組追加這些子div，但沒有發生。所以我需要以下結果。

<div class="span6"> 
    <div class="control-group"> 
     <label class="control-label" for="inputEmail">Item Name</label> 
     <div class="controls"> 
      <input type="text" id="inputEmail" class="input-xlarge" placeholder="Enter item name here..."> 
     </div> 
    </div> 
    <div class="control-group"> 
     <label class="control-label" for="inputEmail">Item Name</label> 
     <div class="controls"> 
      <input type="text" id="inputEmail" class="input-xlarge" placeholder="Enter item name here..."> 
     </div> 
    </div> 
    <div class="control-group"> 
     <label class="control-label" for="inputEmail">Item Name</label> 
     <div class="controls"> 
      <input type="text" id="inputEmail" class="input-xlarge" placeholder="Enter item name here..."> 
     </div> 
    </div> 
    <div class="control-group"> 
     <label class="control-label" for="inputEmail">Item Name</label> 
     <div class="controls"> 
      <input type="text" id="inputEmail" class="input-xlarge" placeholder="Enter item name here..."> 
     </div> 
    </div> 
    <div class="control-group"> 
     <label class="control-label" for="inputEmail">Item Name</label> 
     <div class="controls"> 
      <input type="text" id="inputEmail" class="input-xlarge" placeholder="Enter item name here..."> 
     </div> 
    </div> 
</div> 

請幫我解決。這項工作更受讚賞。

Answer 1

下面jQuery將做要緊。

<script type="text/javascript"> 
$(document).ready(function(){ 

    var data = { val1 : 'text1', val2 : 'text2', val3 : 'text3' }; 
    var options = ''; 
    $.each(data, function(key, value) { 

/* options = '<div class="control-group"><label for="StockCategory">Category</label><div class="controls"><select class="input-xlarge get-category">'; 
    options += '<option value="">Select Category</option>'; 
    options += '<option value="' + key + '">' + value + '</option>'; 
    options +='</select></div></div>'; 
*/ 


    options = '<div class="control-group"><label class="control-label" for="' + key + '">' + key + '</label><div class="controls">'; 
    options +='<input type="text" id="' + key + '" class="input-xlarge" placeholder="' + value + '">'; 
    options +='</div></div>'; 



    $("div.span6").append(options); 

    }); 
}); 
</script> 

Answer 2

我首先要看的是span6缺少一個關閉</div> - 這是否解決了這個問題？

Answer 3

儘量把追加的代碼$。每個

var options = '';   
$.each(categories, function (k, elem) { 
var options = ' 
<div class="control-group"> 
    <label for="StockCategory">Category</label> 
    <div class="controls"> 
     <select class="input-xlarge get-category"> 
      '; 
      options +='<option value="">Select Category</option>'; 
      $.each(data, function(key, value) { 
      options += '<option value="' + key + '">' + value + '</option>'; 
      }); 
      options +=' 
     </select> 
    </div> 
</div>'; 

} 
$("div.span6").append(options); 

Answer 4

外嘗試改變你的腳本

var options = ''; 

$.each(categories, function (k, elem) { 
    options += ' 
    <div class="control-group"> 
     <label for="StockCategory">Category</label> 
     <div class="controls"> 
      <select class="input-xlarge get-category"> 
       <option value="">Select Category</option> 
    '; 
    $.each(data, function(key, value) { 
     options += '<option value="' + key + '">' + value + '</option>'; 
    }); 
    options +=' 
      </select> 
     </div> 
    </div>'; 
} 

$("div.span6").append(options);