Question

我正在尝试使用splice()从jQuery对象中删除元素但是，最终发生的事情是每个其他项目都被删除。我假设这是由于使用拼接的重新索引我要逐渐淡出<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

Answer 2

如果你认为你可以在jquery的结果中使用splice函数，那么就是错误的

让我们考虑你的例子，

$('.module');当您在控制台上执行此操作时，您的结果看起来像是休闲

[<li class="module">item 1</li>,<li class="module">item 1</li>,<li class="module">item 1</li>]

现在，如果您认为这是一个阵列，那么这是一个八卦，那就错了！它就是浏览器在控制台上显示结果的方式。

如果你想确认那么你可以用来在IE控制台上看到上面的结果

$('.module');当您在IE控制台上执行此操作时，您的结果看起来像对象

{0: HTMLLIElement {...}, 1: HTMLLIElement {...}, 2: HTMLLIElement {...}

我也想知道jquery如何将所有结果都放到数组中。实际上它不是数组......将所有结果都变成数组并不是一个大问题..但jquery用来实现这个目标的方式非常独特......有关更多信息，请参阅我的问题How does the splice function work here?

希望这能帮到你......谢谢你。

Answer 3

你打算让$ modules成为一个空的jquery对象，对吗？为什么不这样做？

http://jsfiddle.net/tvWUc/10/

var $modules = $('.module').filter(function() {
    $(this).addClass("fadein").removeClass('module');
    return false;    
});

console.log($modules); // empty jquery collection

$.fn.splice不是一个记录的jquery方法，因为它的行为方式与其他jquery方法不同。我的猜测是在.each期间使用它会影响.each的功能。

拼接jQuery数组元素

3 个答案: