:nth-child() 选择器使用 jQuery答案

【问题标题】：:nth-child() selector using jQuery:nth-child() 选择器使用 jQuery
【发布时间】：2012-08-21 05:08:26
【问题描述】：

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

【问题讨论】：

什么问题？你什么都没问。
我想为每种输入类型添加一个 id。

标签： jquery html

【解决方案1】：

嘿，简单点，你可以这样写：

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

而不是你所有的 jQuery 代码。

【讨论】：

$('input) 选择 ri8 形式的所有输入？但我想选择 newElem(var newElem = $("#milestoneForm1").clone()) 并将 ids 放入其中。
克隆后，您可以使用与此相同的选择器 var newElem = $("#milestoneForm1").clone(); $(newElem).find('input').each(function(index){$(this).attr('id','name'+index)});
我通过这种方式解决了这个问题：newElem.children(':first').children(':nth-child(2)').children(':first').attr(' id', 'project' + newNum).attr('name', 'project' + newNum);....... 无论如何谢谢

【解决方案2】：

另一种添加id的方式

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

【讨论】：