nextSibling 요소 업데이트

Question

저는 JQuery와 함께 뭔가를하려고 노력해 왔습니다. 나는 다음과 같은 기능을 가지고 : html로에서

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

을,이 (더 큰 코드 블록의 일부)이 여기 일어나고하도록되어 무엇

<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"(새 행이 추가 될 때마다 하나씩 증가)의 id와 숨겨진 양식 요소가있는 단어로 변경됩니다. 이것은 잘 작동합니다. 그러나 다음에이 두 번째 부분에서는 newRowNum과 일치하도록 텍스트 입력의 이름과 ID를 업데이트해야합니다.이 경우 name = "os + newRowNum"등입니다.이 작업을 수행 할 수 없습니다. 나는 이것을 접근하기에 적절한 형식을 사용하지 않을 가능성이 가장 높습니다. 나는 다음을 모두 시도했다 :

플러스 위의 많은 다른 버전. 아무도 이것으로 나를 도울 수 있습니까? 희망이 너무 막연하지 않습니다.

Answer 1

이 선택의 대신

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

$('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에 추가하십시오.

가 BTW - 난 당신이 내가 당신의 질문 :

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).attr('name',newOID);