使用 JQuery 访问 div 标签中的子级

Question

我有下面的代码。如果我没有表 tr td 标签，我可以访问输入和单选框。通过仅具有输入和单选按钮，我使用 eq(x)。 x 是数字。

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

但我不知道添加表标签后如何访问它们。这是 html 代码。 我如何使用 newElem.children() 来使用 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>

Answer 1

如果您只是想掌握新项目中的输入，那么：

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

但是，我猜这对您不起作用，因为您实际上是在 $(document).ready 调用中执行某些操作，并且这些事情还不存在。是这样吗？

Answer 2

这是因为您专门告诉 jquery 选择第一个孩子。相反，您应该告诉它获取第一个作为输入框（或选择）的子项

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

Answer 3

我不会使用 .children，而是使用 .find 和一些用于选择器的 jQuery 扩展形式。

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

所以像
newElem.find('....按类或 id 插入选择器或类似 :radio')

从您发布的小样本中很难给出更详细的答案。

Answer 4

您可以为您的功能尝试此代码：

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