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

它不能包含在匹配元素的原始集合中，但是您可以创建元素，设置侦听器等然后附加它：

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

Answer 2

您无法将它们添加到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，这是一个坏主意），这可能会影响你如何构建事物。我们必须看到上面伪代码的真实代码才能提供帮助，但上面的概念是合理的。

通过动态添加的元素循环

2 个答案: