javascript - 循环遍历动态添加的元素

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 没有说明如果您添加 到现有集合会发生什么，所以我们不能依赖它当前所做的任何事情)，但是您可以很容易地将代码分解为一个可以在两个地方调用的函数:

$('.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，这是一个坏主意)，这可能会影响您会构造事物。我们必须查看上面伪代码的真实代码才能提供帮助，但上面的概念是合理的。