Добавление и перемещение 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('');    
    }
});

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

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

Что не работает вообще.

Ответы

Ответ 1

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

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

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

Ответ 2

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");

Живая демонстрация:

http://jsfiddle.net/V4SVt/2/

Ответ 3

Хотя решение 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 получит идентификатор в виде второго класса, что очень удобно для их выбора в случае, если кто-то хочет удалить элемент, если случайно добавить больше, чем нужно. Я также добавил эффект fade out на элемент add-link, чтобы пользователь не путался, что он просто исчез. Конечно, это только вопрос личного вкуса, но я считаю его более удобным для пользователя.

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