Добавить и сдвинуть вместе jQuery

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

i = 0;
$('#add-link').click(function() 
{   
    if(i < 9)
    {
        $('.insert-links').append('<div class="new-link" name="link[]"><input type="text" /></div>');
        i++;
    }
    if(i == 9)
    {
        $('#add-link').html('');    
    }
});

Хотя, это хорошо. Тем не менее, я хочу реализовать слайд-Даун при добавлении, я попытался сделать это: 

$('.insert-links').append('<div class="new-link" name="link[]"><input type="text" /></div>').slideDown("fast");

Который вообще не работает.

3 21
jquery jquery-effects

3 ответа:

Как решение Симплекодера, но только в одной строке, используя appendTo(): 

$('<div style="display: none;" class="new-link" name="link[]"><input type="text" /></div>').appendTo($('.insert-links')).slideDown("fast");

Демо: http://jsfiddle.net/V4SVt/336/

28

append() возвращает ссылку на исходный селектор, а не на то, что было добавлено. Я думаю, что вы ищете это: 

$('.insert-links').append('<div style="display: none;" class="new-link" name="link[]"><input type="text" /></div>')
$('.insert-links').find(".new-link:last").slideDown("fast");

Live demo:

Http://jsfiddle.net/V4SVt/2/

37

Хотя решение SimpleCoder абсолютно корректно, я бы сделал это следующим образом: 

i = 0;
$('#add-link').click(function() {   
    if(i < 9) {
        $('.insert-links').append('<div style="display: none;" class="new-link link_' + i + '" name="link[]"><input type="text" /></div>');
        $('.link_' + i).slideDown("fast");
        i++;
    }
    if(i == 9) {
        $('#add-link').fadeOut('200');
    }
});

Причина этого будет заключаться в том, что каждая ссылка input получит идентификатор в виде второго класса, что будет очень удобно для выбора их в случае, если кто-то захочет удалить элемент, если случайно добавит больше, чем нужно. Я также добавил эффект затухания для элемента add-link, чтобы пользователь не запутался, что он просто исчез. Конечно, это всего лишь вопрос личного вкуса, но Я нахожу его более удобным для пользователя.

Надеюсь, это поможет.

3