jquery - 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

我要看的第一件事是 span6 缺少关闭</div>- 这可以解决问题吗？

Answer 2

尝试将附加代码放在 $.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);

Answer 3

尝试将您的脚本更改为

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);

Answer 4

下面的 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>