jQuery的幫助，選擇輸入字段

Question

我想改寫這個jQuery http://jsfiddle.net/Claudius/gDChA/4/使用這個HTML代替http://pastie.org/2370829

的Jquery：

$('button.add', '#companyinfo').live('click', function(e) { 
    $(this).parent().find('button.remove').show(); 
    $(this).hide(); 

    var element = $(this).parents('.input').find('input').last().clone().prop('value',''); 

    var name = element.prop('name'); 
    var pattern = new RegExp(/\[(.*?)\]/); 
    var info = name.match(pattern)[1]; 
    var newname = name.replace(pattern, '[' + info + 'info' + ']'); 
    var newid = element.prop('id') + 'info'; 

    element.prop('name', newname); 
    element.prop('id', newid);  
    element.insertAfter($(this).parents('.input').find('input').last()); 

}) 
$('button.remove', '#companyinfo').live('click', function(e) { 
    $(this).parent().find('button.add').show(); 
    $(this).hide(); 
    $(this).parents('.input').find('input').last().remove('input'); 
}); 

老HTML

<fieldset id='companyinfo'><legend>Company info</legend> 

    <div class='input string optional'> 
     <label for='company_navn' class='string optional'>Count</label> 
     <input type='text' size='50' name='company[count]' id='company_navn' maxlength="255" class='string optional' /> 
     <div class='button-row'> 
      <button class='add'>Add info</button> 
      <button class='remove'>Remove</button> 
     </div> 
    </div> 

    <div class="input string optional"> 
     <label for="company_navn" class="string optional">Navn</label> 
     <input type="text" size="50" name="company[navn]" maxlength="255" id="company_navn" class="string optional"> 
     <div class='button-row'> 
      <button class='add'>Add info</button> 
      <button class='remove'>Remove</button> 
     </div> 
    </div>  
</fieldset> 

新的HTML：

<div class="input string optional"><label for="virksomhed_navn" class="string optional"> Navn</label><input type="text" size="50" name="virksomhed[navn]" maxlength="255" id="virksomhed_navn" class="string optional"></div> 
<div class="button-row" style="font-size: 11px; width: 110px; float: right; margin-top: -10px; margin-right: 16px;"> 
     <button class="add" style="font-size: 11px;">Add info</button> 
     <button class="remove" style="font-size: 11px;">Remove</button> 
    </div> 

    <div class="input string optional"><label for="virksomhed_name" class="string optional">Name</label><input type="text" size="50" name="virksomhed[name]" maxlength="255" id="virksomhed_name" class="string optional"></div> 
<div class="button-row" style="font-size: 11px; width: 110px; float: right; margin-top: -10px; margin-right: 16px;"> 
     <button class="add" style="font-size: 11px;">Add info</button> 
     <button class="remove" style="font-size: 11px;">Remove</button> 
    </div> 


    <div class="input string optional"><label for="virksomhed_pis" class="string optional">Pis</label><input type="text" size="50" name="virksomhed[v]" maxlength="255" id="virksomhed_pis" class="string optional"></div> 
<div class="button-row" style="font-size: 11px; width: 110px; float: right; margin-top: -10px; margin-right: 16px;"> 
     <button class="add" style="font-size: 11px;">Add info</button> 
     <button class="remove" style="font-size: 11px;">Remove</button> 
    </div> 

如何在新的HTML中選擇輸入字段並創建相同的功能？

Answer 1

有兩個地方需要更改。

1. 處理程序鉤住的按鈕。
2. 您獲得最後一個輸入字段的方式。

還有一些小的改進，你可以這樣做：

1. 由於按鈕是靜態的，你可以使用點擊（）添加事件處理程序，而不是活的（）
2. 在三個地你需要找到相對於當前按鈕的最後一個輸入字段;使它成爲一個函數會使它更容易理解和修改。
3. 大多數jQuery set函數（包括prop（））都可以接受一個對象來設置多個值。這通常比多次調用同一個函數更好。

所以，最終的結果是：

function findLastInput (element) { 
    return $(element).parent().prev().find('input').last(); 
} 
$('button.add').click (function(e) { 
    $(this).parent().find('button.remove').show(); 
    $(this).hide(); 

    var element = findLastInput(this).clone(); 
    var name = element.prop('name'); 
    var pattern = new RegExp(/\[(.*?)\]/); 
    var info = name.match(pattern)[1]; 

    element.prop({ 
     'value': '', 
     'name' : name.replace(pattern, '[' + info + 'info' + ']'), 
     'id' : element.prop('id') + 'info' 
    });  
    element.insertAfter(findLastInput(this)); 
}) 
$('button.remove').click (function(e) { 
    $(this).parent().find('button.add').show(); 
    $(this).hide(); 
    findLastInput(this).remove('input'); 
});