How can i access the child element of a child element? is that possible?

Question

I'm having difficulties on my bulk save/add..

here's my code

<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" />

here's my 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>

What I'm trying to do here is when Add button is click the div is cloned along with its elements, and the textboxes inside the div will the different id's based on the clone, example (txtSkillName1,txtSkillName2 so on).. the text box of the txtSkillName is working but I'm having problem with txtSkillLevel1 and txtSkillDescription1.

Instead of using .children, try .find which traverses the whole tree of a parent (children, children's children, etc) instead of only one level? — garethb, Feb 21 '14 at 05:32
@garethb i tried to use the .find but it just only change the id of the main div not the cloned ones... — Mr.Bobo Haha, Feb 21 '14 at 05:36
@garethb actually thats what the id of the field txtSkillName1 does perfectly, but what i'm having difficulties is the id inside the child element of a child element.. i can't manipulate its id because i cant access that element.. — Mr.Bobo Haha, Feb 21 '14 at 05:52
Can you add a class to each of the cloned elements as a way to distinguish them, and then use .find on the clone with the class as a filter? — garethb, Feb 21 '14 at 06:12
@garethb it seems to be possible... but how can i do that..??? i'm not so familiar with this... — Mr.Bobo Haha, Feb 21 '14 at 06:13

garethb · Accepted Answer · 2014-02-21T06:53:52.733

See this demo. I think it does what you're trying to accomplish. However you will have to change the code to make it fit your needs, I've only done up to one clone.

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


});

Make sure to change the name attribute first!

thanks for this one brother, i just can't test it ryt now because of our server its currently down for this moment... but rest assured i will up vote this answer when i already tried it on my project.. thank you — Mr.Bobo Haha, Feb 21 '14 at 09:47
np, if it doesn't work as you're expecting because I've misunderstood something, let me know. And don't forget to change the for attribute of the labels either. — garethb, Feb 25 '14 at 00:14

How can i access the child element of a child element? is that possible?

1 Answers1