我有以下带有子标签的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>
请帮我搞定。这项工作更受赞赏。
答案 0 :(得分:1)
我要看的第一件事是span6缺少一个结束</div>
- 它能解决这个问题吗?
答案 1 :(得分:1)
尝试将附加代码放在$ .each
之外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);
答案 2 :(得分:1)
尝试将脚本更改为
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);
答案 3 :(得分: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>