Jquery 帮助选择输入字段

Question

I am trying to rewrite this Jquery http://jsfiddle.net/Claudius/gDChA/4/ to use this HTML instead 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');
});

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

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

How can I select the inputs fields in the new HTML and create the same functionality?

Answer 1

There are two places you need to change.

1. The buttons that the handlers hook on to.
2. The way you get the last input field.

And there are some minor enhancements you can do:

1. Since the buttons are static, you can use click() to add event handler instead of live()
2. At three place you need to find the last input field relative to current button; making it a function would make it easier to understand and modify.
3. most jQuery set functions, including prop(), can take an object to set multiple values. This is usually better then calling the same function many times.

So, the final result:

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