更新下一个同步元素

Question

我一直在尝试使用JQuery。我有以下功能：

<script type="text/javascript"> 
$(function(){ 
    // start a counter for new row IDs 
    // by setting it to the number 
    // of existing rows 
    var newRowNum = 2; 

    // bind a click event to the "Add" link 
    $('#addnew').click(function(){ 
     // increment the counter 
     newRowNum += 1; 

     // get the entire "Add" row -- 
     // "this" refers to the clicked element 
     // and "parent" moves the selection up 
     // to the parent node in the DOM 
     var addRow = $(this).parent().parent(); 

     // copy the entire row from the DOM 
     // with "clone" 
     var newRow = addRow.clone(); 

     // set the values of the inputs 
     // in the "Add" row to empty strings 
     //$('input', addRow).val(''); 
     //$('name', addRow).val('os' + newRowNum); 

     // replace the HTML for the "Add" link 
     // with the new row number 
     $('td:first-child', newRow).html('<input type="hidden" name="on' + newRowNum + '" value="Email Address ' + (newRowNum - 1) + '">Recipient'); 

     // insert a remove link in the last cell 
     $('td:last-child', newRow).html('<a href="" class="remove">Remove<\/a>'); 

     // loop through the inputs in the new row 
     // and update the ID and name attributes 
     $('td:first-child.next-child.input', newRow).each(function(i){ 
      var newID = newRowNum; 
      $(this).attr('id','os' + newID).attr('name','os' + newID); 
     }); 

     //$('td:first-child.next', newRow).html('<input type="text" id="os' + newRowNum + '" name="os' + newRowNum + '" value="">'); 

     // insert the new row into the table 
     // "before" the Add row 
     addRow.before(newRow); 

     // add the remove function to the new row 
     $('a.remove', newRow).click(function(){ 
      $(this).parent().parent().remove(); 
      return false;    
     }); 

     // prevent the default click 
     return false; 
    }); 
}); 
</script> 

在HTML中，我有这样的（一个更大的代码块的一部分）：

<tr> 
    <td><input type="hidden" name="on2" value="Email Address 1"><a id="addnew" href="">Add</a></td><td><input name="os2" type="text" id="os2" value="" size="24" maxlength="60" /></td> 
    <td>&nbsp;</td> 
</tr> 

什么是应该在这里发生的是，当添加链接点击，添加更改为带有名称=“on + newRowNum”的隐藏表单元素的收件人（对于添加的每个新行增加1），并且id相同。这工作得很好。然而，在接下来的第二部分中，我需要更新文本输入的名称和id以匹配newRowNum，在这种情况下，name =“os + newRowNum”等。我无法做到这一点。我很可能不会使用适当的表单来访问它。我试过以下所有内容：

$('td:first-child.next-child.input', newRow).each(function(i){ 
    var newID = newRowNum; 
    $(this).attr('id','os' + newID).attr('name','os' + newID); 
}); 

$('td:firstChild.nextSibling.input', newRow).each(function(i){ 
    var newID = newRowNum; 
    $(this).attr('id','os' + newID).attr('name','os' + newID); 
}); 

加上上面的许多其他版本。任何人都可以帮我解决这个问题吗？希望这不是太模糊。

Answer 1

此选择，而不是$('td:first-child.next-child.input', newRow)有点不对。如果我们需要做的就是让行中输入我们可以做

$('input:hidden', newRow).attr('id','on' + newRowNum).attr('name','on' + newRowNum); 
$('input:text', newRow).attr('id','os' + newRowNum).attr('name','os' + newRowNum); 

这里有一个Working Demo。如果您想查看代码，请将/编辑添加到URL。

顺便说一句 - 我认为你的意思是something like this原来，直到我重新阅读你的问题:)

Answer 2

这个什么：

$(newRow:input:last).each(function(i){ 
    var newID = newRowNum; 
    var newOID = 'os' + newID; 
    $(this).attr('id',newOID).attr('name',newOID); 
}); 

注：我没有测试过回调的ATTR所以你可能需要：

$(this).attr('id',newOID); 
$(this).attr('name',newOID); 

的

$(this).attr('id',newOID).attr('name',newOID);