jQuery - Добавить новый div на клик после последнего совпадения div

Question

Я хочу добавить новый div на клик @ в конце последнего матча.

<form id="form"> 
     <div class="border item-block"> 
      <p><b>Color :</b> silver </p> 
      <input type="hidden" name="available_colors[silver][color_name]" value="silver"> 
      <input type="text" name="available_colors[silver][color_image]" value="SM-9436RE_B_BEAUTY.JPG"> 
     </div> 
     <a style = "float : left; margin-top: 50px" class="button add">Add</a> 
    </form> 

По щелчку Я хочу создать DIV с вводом в этом атр available_colors [NEW] [0] [COLOR_NAME] и так далее.

Как это

<form id="form"> 
       <div class="border item-block"> 
        <p><b>Color :</b> silver </p> 
        <input type="hidden" name="available_colors[silver][color_name]" value="silver"> 
        <input type="text" name="available_colors[silver][color_image]" value="SM-9436RE_B_BEAUTY.JPG"> 
       </div> 
       <div class="border item-block"> 
        <p><b>Color :</b> <input type="text" name="available_colors[NEW][0][color_name]" value=""></p> 
        <input type="text" name="available_colors[NEW][0][color_image]" value=""> 
       </div> 
       <a style = "float : left; margin-top: 50px" class="button add">Add</a 
    </form> 

На втором клике хочет добавить это Див

<div class="border item-block"> 
     <p><b>Color :</b> <input type="text" name="available_colors[NEW][1][color_name]" value=""></p> 
     <input type="text" name="available_colors[NEW][1][color_image]" value=""> 
</div> 

я попробовать этот подход, но я не получаю заявление. Я попытался клонировать последний div, но я не знаю, как я могу переключить все атрибуты входных имен.

$('a.add').click(function(){ 
     var form, fields; 
     //$('.item-block').last().clone().insertAfter($('.item-block').last()); 
     form = $("#form"); 
     fields = form.find("input[name^='available_colors[NEW]']"); 
     alert(fields[0]); 
    }); 

Может ли кто-нибудь посоветовать мне это знать?

Благодарю вас заранее.

Answer 1

Я бы порекомендовал использовать метод jquery .after(): after() - jQuery API. Таким образом, вы можете использовать его так:

$('a.add').click(function(){ 
    // get a handle on the last instance of the div 
    var lastDiv = $('#form').find('div.item-block').last(); 

    // create the new div you want to add 
    var newDiv = lastDiv.clone(); 
    newDiv.find('input').attr('name','available_colors[NEW][1][color_image]'); 

    // add the new div after the last instance of the item-block div 
    lastDiv.after(newDiv); 
} 

Answer 2

Во-первых, Элемент на вашем примере сломан.

Вы можете использовать глобальной переменной:

var count = 0; 

... и структурирование функции:

function addNewBlock(){ 
    count++; 
    return '<div class="border item-block">'+ 
     '<p><b>Color :</b> <input type="text" name="available_colors[NEW]['+(count-1)+'][color_name]" value=""></p>'+ 
     '<input type="text" name="available_colors[NEW]['+(count-1)+'][color_image]" value="">'+ 
     '</div>'; 
} 

... и добавления функции:

$('a.add').click(function(){ 
    // here, you get the new structured HTML object 
    $html = addNewBlock(); 

    //and you just need to append it: 
    $("#form").append($html); 
}); 

Не работает, если A element находится внутри FORM tag. Вам необходимо, чтобы вырезать-вставить<a style = "float : left; margin-top: 50px" class="button add">Add</a> для всего кода FORM.

jQuery Добавить документацию: http://api.jquery.com/append/ Думаю, это сработает для вас.