CODEWITHSUNDEEP
jquerychildren
user696383
user696383

Reputation: 33

Access children in div tag using JQuery

I have the below code. I am able to access the input and radio box if i did not have the table tr td tags. By just having the inputs and radio button, i use eq(x). x is number.

var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);
newElem.children(:eq(0)').attr('id', 'frmBuyerComments_RsnCode' + newNum).attr('name', 'frmBuyerComments_RsnCode' + newNum);    
newElem.children(':eq(1)').attr('id', 'frmBuyerComments_money' + newNum).attr('name', 'frmBuyerComments_RadioGroup' + newNum);
newElem.children(':eq(2)').attr('id', 'frmBuyerComments_percentage' + newNum).attr('name', 'frmBuyerComments_RadioGroup' + newNum);

But i do not know how to access them when added table tags. Here is the html code. How do i play with newElem.children() to access as shown above by using newElem.children()

<div id="inputForm">

    <div id="input1" style="margin-bottom:4px;" class="clonedInput">
        <table cellspacing="0" cellpadding="2" width="100%" style="margin:10px 0px 0px 0px;" id="TableReasonCode"> 
            <tr>
                <td width="25%">Reason Code</td>
                <td class="_CommentsData"><select id="frmBuyerComments_RsnCode1" runat="server"></select></td>
            </tr>
            <tr>
                <td width="25%">Symbol</td>
                <td class="_CommentsData"><input type="radio" id="frmBuyerComments_money1" name="frmBuyerComments_RadioGroup1" value="$" checked="checked" />$ <input type="radio" id="frmBuyerComments_percentage1" name="frmBuyerComments_RadioGroup1" value="%" /> %</td>
            </tr>
        </table>
        <%--Reason Code :  <select id="frmBuyerComments_RsnCode1" runat="server"></select>
        Denominator :  <input type="radio" id="frmBuyerComments_money1" name="frmBuyerComments_RadioGroup1" value="$" checked="checked" />$ <input type="radio" id="frmBuyerComments_percentage1" name="frmBuyerComments_RadioGroup1" value="%" /> %--%>
    </div>    

    <div>
        <input type="button" id="btnAdd" class="_Buttons" onclick="AddExtraField()" value="More Reason Code" />
        <input type="button" id="btnDel" class="_Buttons" onclick="RemoveExtraField()" value="Remove Reason Code" />
    </div>

    <table cellspacing="0" cellpadding="2" width="100%" style="margin:10px 0px 0px 0px;" id="TableOtherInputs">
        <tr>
            <td width="25%">Comments</td>
            <td class="_CommentsData"><textarea rows="4" cols="24" id="frmBuyerComments_ByerComments" name="frmBuyerComments_ByerComments"></textarea></td>
        </tr>
        <tr>
            <td class="_CommentsLabel"></td>
            <td class="_CommentsData"></td>
        </tr>
    </table>

</div>

Upvotes: 1

Views: 3362

Answers (4)

TheVillageIdiot
TheVillageIdiot

Reputation: 40527

you can try this code for your function:

var num = 1;
function AddExtraField(){
    var old="div#input"+num;
    var newNum = num+1;
    var newElem = $(old).clone();
    $(newElem).attr('id', 'input' + newNum);
    $(newElem).appendTo($(old));
    $("#frmBuyerComments_money"+num, newElem)
        .attr("id","#frmBuyerComments_money"+newNum)
        .attr('name', 'frmBuyerComments_RadioGroup' + newNum);

    $("#frmBuyerComments_percentage"+num, newElem)
        .attr("id","#frmBuyerComments_percentage"+newNum)
        .attr('name', 'frmBuyerComments_RadioGroup' + newNum);
    $(newElem).effect('highlight',{},1000,function(){});
    ++num;
}

Upvotes: 0

MikeScott8
MikeScott8

Reputation: 720

Instead of using .children I would use .find and some of the form jQuery extensions for selectors.

http://api.jquery.com/category/selectors/

So something like newElem.find('....insert selector by class or id or something like :radio')

Kind of hard from the small sample you posted to give more detailed answer.

Upvotes: 0

Sinetheta
Sinetheta

Reputation: 9449

If you're just trying to get a hold of the inputs in your new items then:

$('#input'+newNum).find('select')
$('#input'+newNum).find('input[type="radio"]')

However, I'm guessing this isn't working for you because you're actually doing something inside a $(document).ready call and these things don't exist yet. Is this the case?

Upvotes: 2

JohnP
JohnP

Reputation: 50029

This is because you're specifically telling jquery to pick the first child. Instead, you should tell it to get the first child that is an inputbox (or select)

newElem.children('select:eq(0)'); //first select box
newElem.children('input:eq(0)'); //first input box

Upvotes: 0

Related Questions