Jquery - Realizar devolución de llamada después de anexar

Question

estoy anexando contenido a una lista usando:

$('a.ui-icon-cart').click(function(){ 
     $(this).closest('li').clone().appendTo('#cart ul'); 
    }); 

que desea llevar a cabo otras funciones que el contenido adjunto (clase cambio, aplicar animaciones, etc.)

¿Cómo puedo realizar una devolución de llamada en esta función que me permitirá realizar funciones en los datos adjuntos?

Answer 1

de jQuery .each() toma una función de devolución de llamada y lo aplica a cada elemento en el objeto jQuery.

Imagínese que algo como esto:

$('a.ui-icon-cart').click(function(){ 
    $(this).closest('li').clone().appendTo('#cart ul').each(function() { 
    $(this).find('h5').remove(); 
    $(this).find('img').css({'height':'40px', 'width':'40px'}); 
    $(this).find('li').css({'height':'60px', 'width':'40px'}); 
    }); 
}); 

También puedes, simplemente almacenar el resultado y trabajar en él en su lugar:

$('a.ui-icon-cart').click(function(){ 
    var $new = $(this).closest('li').clone().appendTo('#cart ul') 
    $new.find('h5').remove(); 
    $new.find('img').css({'height':'40px', 'width':'40px'}); 
    $new.find('li').css({'height':'60px', 'width':'40px'}); 
}); 

Me gustaría también sugieren que en lugar de mofiying la CSS como la que acaba de agregue una clase a su li clonado así:

$(this).closest('li').clone().addClass("new-item").appendTo('#cart ul'); 

Luego configure algunos estilos como:

.new-item img, .new-item li { height: 40px; width: 40px; } 
.new-item h5 { display: none } 

Answer 2

Puede seguir encadenando otras operaciones en el punto y coma.

$(this).closest('li').clone().appendTo('#cart ul').addClass('busy').fade('fast'); 

etc

Answer 3

Desafortunadamente, la adición de devoluciones de llamadas a las operaciones dom no es algo que se puede hacer de una manera ordenada mediante javascript. Por esta razón, no está en la biblioteca jQuery. Sin embargo, un settimeout con el temporizador "1ms" siempre pone la función en el settimeout en la parte inferior de la pila de llamadas. ¡Esto funciona! La biblioteca underscore.js usa esta técnica en _.defer, que hace exactamente lo que usted quiere.

$('a.ui-icon-cart').click(function(){ 
    $(this).closest('li').clone().appendTo('#cart ul'); 
    setTimeout(function() { 
     // The LI is now appended to #cart UL and you can mess around with it. 
    }, 1); 
});