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

：使用jQuery的nth-child（）选择器

2 个答案: