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

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 和 txtSkillDescription1 时遇到问题。

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


});

确保先更改名称属性!