jquery - :nth-child() jQuery を使用したセレクター

Question

HTML:

<div class="classMilestone" id="milestoneForm2">

               <li>
                <div class="label1">Project :</div>
                <div class="input1">
<select id="status" name="status">
    <option label="Select One" value="">Select One</option>
    <option label="df" value="52">df</option>
    <option label="dfgd" value="41">dfgd</option>
    <option label="dgg" value="6">dgg</option>
    <option label="ere" value="4">ere</option>
    <option label="erege" value="43">erege</option>
    <option label="erege" value="44">erege</option>
    <option label="erege" value="45">erege</option>
    <option label="erege" value="46">erege</option>
    <option label="estrest" value="19">estrest</option>
    <option label="gdg" value="48">gdg</option>
    <option label="ryhf" value="53">ryhf</option>
    <option label="test project" value="1">test project</option>
    <option label="tgreg" value="8">tgreg</option>
</select><span class="validation_star">*</span></div>
            </li>
            <li>
                <div class="label1">Name :</div>
                <div class="input1">
<input type="text" class="input_1" value="" id="milestoneName" name="milestoneName[]"><span class="validation_star">*</span></div>
            </li>

             <li>
                <div class="label1">Start Date :</div>
                <div class="input1">
<input type="text" class="input_1" value="" id="startDate" name="startDate[]"><span class="validation_star">*</span></div>
            </li>


             <li id="name2" name="name2">
                <div class="label1">End Date :</div>
                <div class="input1">
<input type="text" class="input_1" value="" id="endDate" name="endDate[]"><span class="validation_star">*</span></div>
            </li>

             <li>
                <div class="label1">Estimated Hours :</div>
                <div class="input1">
<input type="text" class="input_1" value="" id="estimatedHours" name="estimatedHours[]"><span class="validation_star">*</span></div>
            </li>


             <li>
                <div class="label1">Description :</div>
                <div class="input1">
<textarea class="input_1" cols="24" rows="5" id="description" name="description[]"></textarea><span class="validation_star">*</span></div>
            </li>   
</div>




 <input type="button" name="button" id="button" value="SAVE" onclick="javascript:m.add();">&nbsp;&nbsp;
                <input type="button" name="button" id="addform" value="+" >&nbsp;&nbsp;
                <input type="button" name="button" id="delform" value="--" >

addform ボタンをクリックすると、milestoneForm div が複製されて newElem に保存され、millstone div の後にフォーム全体が表示されます。その際、各入力要素に id を追加したいと思います。どうすれば同じことができますか？

jQuery:

var num     = $('.classMilestone').length; // how many "duplicatable" input fields we currently have
    var newNum  = new Number(num + 1);      // the numeric ID of the new input field being added

  var newElem = $("#milestoneForm1").clone()
  newElem.children(':nth-child(4)').attr('id', 'name' + newNum).attr('name', 'name' + newNum);

Answer 1

簡単に言うと、次のように書くことができます。

$('input').each(function(index){$(this).attr('id','name'+index)});

すべての jQuery コードの代わりに。

Answer 2

ID を追加する別の方法

 $("input").attr("id", function (arr) {
  return "name" + arr;
})