我如何访问子元素的子元素？那可能吗？

Question

我有我的散装困难保存/加..

这里是我的代码

<div id="contentMain"> 
    @using (Html.BeginForm("ClientCustomerPositionSkillSave", "Customer", FormMethod.Post, new { id = "clientcustomerPositionSkillForm" })) 
    { 
     <input type="hidden" id="clientCusPosSkillId" name="clientCusPosSkillId" value="" /> 
     <input type="hidden" id="clientCusPosId" name="clientCusPosId" value="@clientCusPosId" /> 
     <input type="hidden" id="clientCusId" name="clientCusId" value="@clientCusId" /> 
     <input type="hidden" id="clientId" name="clientId" value="@clientId" /> 

     <h2> 
      Add Customer Position Skill</h2> 
     <div class="main"> 

     <div id="optionBook1" class="clonedBook"> 
      <label for="txtSkillName1"> 
       <abbr title="Required"> 
        <em><font color="red">*</font></em> 
       </abbr> 
       Skill Name 
      </label> 
       <input type="text" id="txtSkillName1" name="txtSkillName1" class="validate[required] inputLong" 
       runat="server" /> 

       <p class="power"> 
       <label for="txtSkillLevel"> 
        <abbr title="Required"> 
         <em><font color="red">*</font></em> 
        </abbr> 
        Skill Level</label> 
       <span> 
        <input type="text" id="txtSkillLevel1" name="txtSkillLevel1" class="validate[required] inputLong" 
         value="" /> 
       </span> 
      </p> 
      <p> 
       <label for="txtSkillDescription"> 
        <abbr title="Required"> 
         <em><font color="red">*</font></em> 
        </abbr> 
        Skill Description</label> 
       <span> 
        <textarea style="overflow: auto; resize: none" rows="3" cols="50" id="txtSkillDescription1" 
         name="txtSkillDescription1" class="validate[required] inputLong"></textarea> 
       </span> 
      </p> 

      </div> 
      <input type="button" id="btnAdd1" value="Add" /> 
       <input type="button" id="btnDel1" value="Remove" /> 
     </div> 
     <input type="submit" id="btnSave" class="styledButton" value="Save" /> 

，这里是我的jQuery

<script type="text/javascript"> 

    $(document).ready(function() { 

     $('#btnAdd1').click(function() { 

      var num = $('.clonedBook').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 

      // create the new element via clone(), and manipulate it's ID using newNum value 
      var newElem = $('#optionBook' + num).clone().attr('id', 'optionBook' + newNum); 


      // manipulate the name/id values of the input inside the new element 
      newElem.children(':nth-child(10n-8)').attr('id', 'txtSkillName' + newNum).attr('txtSkillName', 'txtSkillName' + newNum); 


      newElem.children(':nth-child(10n-4):nth-child(10n-8):first').attr('id', 'txtSkillDescription' + newNum).attr('txtSkillDescription', 'txtSkillDescription' + newNum); 

      // insert the new element after the last "duplicatable" input field 
      $('#optionBook' + num).after(newElem); 
      //   $('#apn-book' + num).after(newElem); 

      // enable the "remove" button 
      $('#btnDel1').attr('disabled', ''); 

      // business rule: you can only add 5 names 
      if (newNum == 5) 
       $('#btnAdd1').attr('disabled', 'disabled'); 


     }); 



     }) 
     $('#btnDel1').click(function() { 
      var num = $('.clonedBook').length; // how many "duplicatable" input fields we currently have 
      $('#optionBook' + num).remove();  // remove the last element 

      // enable the "add" button 
      $('#btnAdd1').attr('disabled', ''); 

      // if only one element remains, disable the "remove" button 
      if (num - 1 == 1) 
       $('#btnDel1').attr('disabled', 'disabled'); 
     }); 

    }); 


</script> 

我想在这里做的是，当加按钮是单击该div与它的元素一起克隆，div内的文本框将基于克隆的不同ID，例如（txtSkillName1，txtSkillName2等）.. txtSkillName的文本框正在工作，但我有txtSkillLevel1和tx的问题tSkillDescription1。

Answer 1

看到这个演示。我认为它是做你想做的。但是，您必须更改代码以使其符合您的需求，我只完成了一次克隆。

http://jsfiddle.net/vj9RD/4/

$('#btnAdd1').click(function() { 

    // create the new element via clone(), and manipulate it's ID using newNum value 
    var newElem = $('#optionBook1').clone().attr('id', 'optionBook2'); 


    // manipulate the name/id values of the input inside the new element 
    $(newElem).find('[id=txtSkillName1]').attr('name', 'txtSkillName2');  
    $(newElem).find('[id=txtSkillName1]').attr('id', 'txtSkillName2'); 

    $(newElem).find('[id=txtSkillLevel1]').attr('name', 'txtSkillLevel2');  
    $(newElem).find('[id=txtSkillLevel1]').attr('id', 'txtSkillLevel2'); 

    $(newElem).find('[id=txtSkillDescription1]').attr('name', 'txtSkillDescription2');  
    $(newElem).find('[id=txtSkillDescription1]').attr('id', 'txtSkillDescription2'); 

    // insert the new element after the last "duplicatable" input field 
    $(newElem).insertAfter('#optionBook1'); 


}); 

确保更改名称属性第一！