jqueryを追加してスライドさせます

Question

入力ボックスをさらに追加するまで、より多くの入力ボックスを追加するために作成したこの追加方法があります。

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

まったく機能しません。

Answer 1

SimpleCoderのソリューションのように、しかし使用している1行のみ appendTo():

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

デモ： http://jsfiddle.net/v4svt/336/

Answer 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/

Answer 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 2番目のクラスの形でIDを取得します。これは、誤って複数のニーズを追加する場合、要素を削除する場合に選択するのに非常に便利です。また、フェードアウト効果も追加しました add-link ユーザーが消えただけで混乱しないように要素。もちろん、それは単なる個人的な好みの問題ですが、よりユーザーフレンドリーだと思います。

お役に立てれば。