jQuery的 - 執行回調追加

Question

我使用的追加內容的列表後：

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

我想執行其他功能的附加內容（其他類，應用動畫等）

我怎樣才能對此函數執行回調，這將允許我對附加數據執行函數？

Answer 1

jQuery的.each()需要一個回調函數並將其應用於在jQuery對象的每個元素。

想象這樣的事情：

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

你也只是結果和工作在其上存儲來代替：

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

我也建議，與其mofiying像您剛纔的CSS添加一個類到你的克隆李像這樣：

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

然後設置一些樣式，如：

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

Answer 2

您可以繼續使用分號鏈接進一步的操作。

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

等

Answer 3

不幸地給dom操作添加回調並不是可以用整潔的方式使用javascript來完成的。由於這個原因，它不在jQuery庫中。但是定時器「1ms」的settimeout總是將函數置於調用堆棧底部的settimeout中。這確實有用！ underscore.js庫在_.defer中使用這種技術，它完全符合你的需求。

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