Question

我试图这样做我的头脑。如何通过jQuery的append方法获取当前元素？我知道它会附加到集合上的每个元素，但是没有办法让当前元素被迭代？

假设我们有这个HTML

<div class="parent" id="1">
    <div class="list"></div>
</div>
<div class="parent" id="2">
    <div class="list"></div>
</div>
... more dynamically generated parents

每个div都是在之前的另一个追加调用中生成的，所以我认为这不重要，但我会留下这些信息以防万一。

的jQuery

$(".list").append('<input name="id[IDOFPARENT][]"/>');

这里我将输入附加到每个框，但它应该包含父的id（到目前为止我只使用了静态id。

我试过

$(this).closest(".parent").attr("id")

但它说undefined因为this是：

Window {speechSynthesis: SpeechSynthesis, caches: CacheStorage, localStorage: Storage, sessionStorage: Storage, webkitStorageInfo: DeprecatedStorageInfo…}

（我猜的文件）。

有什么方法可以解决它，而无需切换到“foreach”循环？

Answer 1

通过类名迭代每个元素，$('.list')为您提供一个数组。对于迭代，您可以使用.each()函数

＆＃13;

$(function(){
  $(".list").each(function(){
    var id = $(this).closest('.parent').attr('id');
    var html = '<input name="id_' + id + '"/>'
    $(this).append(html);
  })
  
  
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent" id="1">
    <div class="list"></div>
</div>
<div class="parent" id="2">
    <div class="list"></div>
</div>
<div class="parent" id="3">
    <div class="list"></div>
</div>
<div class="parent" id="4">
    <div class="list"></div>
</div>

＆＃13;

Answer 2

的javascript

var max_fields      = 100; //maximum input boxes allowed
    var wrapper         = $("#input_fields_wrap"); //Fields wrapper
    var add_button      = $("#add_field_button"); //Add button ID

    var x = $(".counter").length; //initlal text box count
    $(add_button).on("click",function(){ //on add input button click
        //alert("masuk klikc")
        //e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment

            $(wrapper).append('<div class="counter"><div class="control-group "><label class="control-label" for="perluDilakukanTindakan">Tindakan Perbaikan Yang Perlu Dilakukan '+x+' :</label><div class="controls">'
                    +'<textarea name="perluDilakukanTindakan" cols="" rows="" id="perluDilakukanTindakan" style="margin-left: 20px; width: 350px;"></textarea></div>'
                    +'</div>'


                    +'<div class="control-group">'
                    +'<div class="controls">'
                    +'<label class="control-label">Label Detail '+x+' :</label>'
                    +'&nbsp;<input type="button" value="Delete Detail Perbaikan" class="remove_field btn btn-mini btn-danger" style="margin-top: 4px;">'
                    +'</div>'
                    +'</div>'


                    +'<div class="control-group "><label class="control-label" for="sDeadlinePerbaikan">Detail Att '+x+' :</label><div class="controls">'

                    +'<input type="text" name="stringDeadlinePerbaikan" id="sDeadlinePerbaikan'+x+'" value="" class="sDeadlinePerbaikan fieldShort"></div>'
                    +'</div></div>'); //add input box
        }

    });

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').parent('div').parent('div').remove(); x--;
    });

HTML

<div id="input_fields_wrap">
                <div class="counter">
                    <input type="textarea" name="perluDilakukanTindakan" id="perluDilakukanTindakan" label="Tindakan Perbaikan Yang Perlu Dilakukan 1 " labelSeparator=":" cssStyle="margin-left: 20px; width: 350px;" /> 

                    <div class="control-group">
                        <div class="controls">
                            <label class="control-label">PIC Tindakan Perbaikan 1 :</label>
                            <input type="text" cssClass="textFieldBranchCode"
                                id="picTindakanPerbaikan" name="picTindakanPerbaikan"
                                cssStyle="margin-left:20px;" labelposition="left"
                                labelSeparator="" theme="simple"  readonly="true"/>

                            <input type="text" id="namaLengkapTindakanPerbaikan"
                                name="namaLengkapTindakanPerbaikan" label=""
                                labelposition="left" labelSeparator="" theme="simple"
                                readonly="true" cssStyle="margin-left:0px;" />

                        <input type="button" value="Add Detail Perbaikan " id="add_field_button" class="btn btn-mini btn-success" style="margin-top: 4px;"/>
                        </div>
                    </div>


                    <input type="text" name="stringDeadlinePerbaikan" id="stringDeadlinePerbaikan" label="Label detail 1 " labelSeparator=":" cssClass="sDeadlinePerbaikan fieldShort" />
                </div>
            </div>

这是我实现的动态js，这个脚本将在最后一个元素中追加“html”。如果您需要附加所需的当前元素，只需将“html text”修改为您选择的屏幕上的元素即可。

附加当前元素

2 个答案: