更新nextSibling元素

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>

这里应该发生的情况是，当单击Add链接时，Add将更改为单词Recipient，并带有一个隐藏的表单元素name="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 );

这是一个。如果您想查看代码，请将/edit添加到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);