Ajouter et glisser ensemble jQuery

Question

J'ai cette méthode append que j'ai faite pour ajouter plus de boîtes de saisie jusqu'à ce qu'il y en ait 10 qui vont désactiver pour 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, c'est bon. Cependant, je veux mettre en œuvre un slideDown lorsqu'elle est jointe, 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

solution est 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 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émonstration en direct:

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

Answer 3

Bien que je ferais comme la solution de SimpleCoder est parfaitement valable, 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 pour cela serait que chaque lien input obtiendrait un ID sous la forme d'une deuxième classe, qui Serait très pratique pour les sélectionner dans le cas où l'on veut supprimer un élément, si l'on en ajoute accidentellement plus d'un a besoin. J'ai également ajouté un effet de fondu sur l'élément add-link afin que l'utilisateur ne soit pas confus qu'il a juste disparu. Bien sûr, c'est juste une question de goût personnel, mais je la trouve plus conviviale.

Espérons que cela aide.