循環通過在飛行中添加的元素

Question

舉例來說，如果我有以下的HTML結構

<ul class="actions"> 
    <li class="action">Action 1</li> 
    <li class="action">Action 2</li> 
    <li class="action">Action 3</li> 
</ul> 

而且下面的JavaScript

$('.actions .action').each(function() { 
    perform an ajax request // intended pseudocode 
    if ajax returns some more actions { // intended pseudocode 
      $('.installer-actions').append('<li class="action">Another Action</li>'); 
    } 
}); 

添加的<li class="action">元素不包含在each()明顯。有沒有一種方法可以讓他們參與當前循環，或者我需要再次循環並忽略原始的.action元素？

Answer 1

你不能將它們添加到對象each正在迭代中（the documentation沒有說明如果你對現有集合使用add會發生什麼情況，所以我們不能依賴於它現在所做的任何事情），但是你可以很容易地將你的代碼分解爲一個函數，你可以同時調用這兩個函數地方：

$('.actions .action').each(doCoolThing); 
function doCoolThing() { 
    var newAction; 

    // perform an ajax request // intended pseudocode 
    if (ajax_returns_some_more_actions) { // intended pseudocode 
     newAction = $('<li class="action">Another Action</li>'); 
     $('.installer-actions').append(newAction); 
     doCoolThing.call(newAction[0]); 
    } 
} 

那裏我們打電話doCoolThing在新的動作，使this內調用新的原始DOM元素（就像each一樣）。

值得一提的，不過，你的Ajax請求將是異步的（除非您設置async到false，這是一個壞主意），這可能會影響你將如何構建的東西。我們必須看到上面的僞代碼的真實代碼才能在那裏幫助，但上面的概念是合理的。

Answer 2

它不能包含在原匹配的元素，但是你可以創建元素，設置你的聽衆等，然後將其追加：

if ajax returns some more actions { // intended pseudocode 
    var element = $('<li class="action">Another Action</li>'); 
    element.someMethods(); 
    $('.installer-actions').append(element); 
}