Splice jQuery array of elements

Question

I'm trying to remove elements from a jQuery object using splice().
But, what ends up happening is every other item is removed. I'm assuming this is due to a re-index of using splice.
I was to fade in each <li> so I need to start at the top.
Is there a way to accomplish this, or perhaps a better way than what I'm doing here?

<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>

You'll notice in the console, every other item is still in the array.

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

Answer 1

This code should work:

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

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

EXPLAINATION

When you use each method, jQuery call your callback for each element, passing i as an index of current element.

So let's say you have an array: [elem1, elem2, elem3, elem4].

On the first step i equals 0. So by writing $el = $modules.eq(i); you get the first element, as expected. then you remove it form array, and now it looks like that: [elem2, elem3, elem4]. On the second step i equals 1, which means second element of your array, that is elem3 actually.

As you can see you jumped over elem2. Thats why some elements remain in an array.

To avoid this behavior you have to use zero index: var $el = $modules.eq(0); and $modules.splice(0, 1);

This is a demo

Answer 2

if you think you can use the splice function on jquery's result like array then its wrong

lets consider your example,

$('.module'); when you execute this on console your result looks like as fallow

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

Now, here is one gossip if you think this is an array then its wrong! it just the way how browser shows you the result on console.

if you want to confirm then you can use to see the above result into IE console

$('.module'); when you execute this on IE console your result looks like as object

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

I was also in wondering how jquery makes all result into array. actually its not array...its not big question to make all result into array ..but what the way jquery use to accomplish this goal its very unique...for more info see my question How does the splice function work here?

hope this help you..thank you.

Answer 3

You intend for $modules to be an empty jquery object afterwards, correct? Why not just do that?

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 is not a documented jquery method because it doesn't act in the same way as other jquery methods. My guess is that using it during the .each affects the functionality of .each.