現在の要素が追加されています

Question

私はこれをやろうとしています。 jQueryのappendメソッドで現在の要素を追加するにはどうすればよいですか？ 私はそれがセットのすべての要素に追加されることは知っていますが、現在の要素を反復させる方法はありませんか？

たちは

<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要素は、別のアペンドコール以前に生成され、このHTMLを持っていると言うことができますので、私は、これは重要であるとは思わないが、私は念のために情報を残しておきます。

jQueryの

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

ここでは、これまで私は、静的なIDを使用（私はすべてのボックスに入力を追加し、それは親のIDが含まれている必要があります。

私は

で試してみました

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

しかしthisがあるので、それはundefined言う：

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

（私が推測する文書）

"foreach"ループに切り替える必要はありませんが、それを解決する方法はありますか？

Answer 1

クラス名で取得した各要素を反復して、$('.list')に配列します。繰り返し処理のためには、

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

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

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ある.each()機能を使用することができますthに "html"を追加します最後の要素。現在の要素を追加する必要がある場合は、選択した画面上の要素に "html text"を変更します。