jquery - 拼接 jQuery 元素数组

Question

我正在尝试使用 splice() 从 jQuery 对象中删除元素.
但是，最终发生的情况是所有其他项目都被删除。 我假设这是由于使用 splice 重新索引造成的。
我要淡入每个 <li>所以我需要从顶部开始。
有没有办法实现这一点，或者也许有比我在这里所做的更好的方法？

<ul>
    <li class="module">item 1</li>
    <li class="module">item 1</li>
    <li class="module">item 1</li>
    <li class="module">item 1</li>
    <li class="module">item 1</li>
    <li class="module">item 1</li>
    <li class="module">item 1</li>
</ul>

<script>
    var $modules = $('.module');

    $modules.each(function(i, el) {
        var $el = $modules.eq(i);

        $modules.splice(i, 1);

        $el.addClass("fadein").removeClass('module');
    });

    console.log($modules);
</script>

您会在控制台中注意到，所有其他项目仍在数组中。

jsFiddle:http://jsfiddle.net/tvWUc/5/

Answer 1

这段代码应该可以工作:

var $modules = $('.module');
$modules.each(function(i) {
    var $el = $modules.eq(0);

    $modules.splice(0, 1);
    $el.addClass("fadein").removeClass('module');
});

说明

当您使用 each 方法时，jQuery 会为每个元素调用回调，并传递 i 作为当前元素的索引。

假设您有一个数组:[elem1, elem2, elem3, elem4]。

第一步，i 等于 0。因此，通过编写 $el = $modules.eq(i);，您将获得预期的第一个元素。然后从数组中删除它，现在它看起来像这样:[elem2, elem3, elem4]。 在第二步中，i 等于 1，这意味着数组的第二个元素，实际上是 elem3。

如您所见，您跳过了 elem2。这就是为什么某些元素保留在数组中的原因。

要避免这种行为，您必须使用零索引:var $el = $modules.eq(0); 和 $modules.splice(0, 1);

这是一个demo