Append et coulissent jQuery

Question

J'ai cette méthode append que je fis ajouter d'autres boîtes d'entrée jusqu'à ce qu'il y est de 10 d'entre eux qui désactivera en faire plus.

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

Bien, il est bon. Cependant, je veux mettre en œuvre un slideDown quand annexe, je l'ai essayé de faire ceci:

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

Ce qui ne fonctionne pas du tout.

Answer 1

La solution Comme SimpleCoder, mais dans une seule ligne en utilisant appendTo():

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

Démo: http://jsfiddle.net/V4SVt/336/

Answer 2

append() renvoie une référence au sélecteur d'origine, et non pas ce qui a été ajouté. Je pense que vous cherchez ceci:

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

Démo en direct:

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

Answer 3

Bien que la solution de SimpleCoder est parfaitement valable, je le ferais comme ceci:

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

La raison en serait que chaque input lien obtiendrait une carte d'identité sous la forme d'une deuxième classe, qui viendrait très pratique pour les sélectionner dans le cas où l'on veut retirer un élément, doit-on ajouter accidentellement plus de besoins . J'ai également ajouté un fondu d'effet sur l'élément add-link afin que l'utilisateur ne soit pas confondu qu'il a tout simplement disparu. Bien sûr, il est juste une question de goût personnel, mais je le trouve plus convivial.

Hope this helps.