Javascript Array not working correctly with $.makeArray

Question

I'm trying to make an array out of a set of div's on a page using jQuery. I basically want to randomise the way they are displayed so for the moment, I'm just trying to cycle through them. Everything appears to work, except that I only ever see the last array item, even though it performs the action the same number of times as there are elements in the array, and adds the correct behaviour.

The JS is:

<script>
$(document).ready(function(){
    var obj = $('.item');
    var arr = $.makeArray(obj);
    $('.array').html('');

    $.each(arr, function(k,v){
        $('.array').html(v).fadeIn(250).delay(2000).fadeOut(250);
    });
});
</script>

And the markup is:

<div class="array">
    <div class="item">First</div>
    <div class="item">Second</div>
    <div class="item">Third</div>
    <div class="item">Fourth</div>
</div>

I'm not sure that it's relevant, but here's the CSS, just in case:

div.item {
    display: inline; float: left; width: 960px; height: 260px; font-family: helvetica; font-size: 10px; text-align: center; background: #eee; border:  solid 1px #888;
}

All I get is the div with the text "Fourth" fading in and out 4 times. This tells me it's iterating through the array fine (as it's using the count) but why am I only seeing the last element? Anyone any thoughts?

Thanks,

T

Martin Jespersen · Accepted Answer · 2011-02-21 12:00:20Z

3

The loop is overwriting the content of the array div in every iteration of the loop. thus you only see the result of the last iteration.

When you use .html(...) it is the same as .empty().append(...). So what you loop does is empty the content 4 times in a row, and only the append after the last empty will actually take effect.

If you wish the elements to fadein/fadeout one after another you can do it like this:

$(document).ready(function(){
    var obj = $('.item');
    $('.array').html('');

    obj.each(function(i){
        $('.array').append($(this).hide().delay(i * 2500).fadeIn(250).delay(2000).fadeOut(250));
    });
});

you can see it running here: http://jsfiddle.net/9Xg8X/

edited Feb 21, 2011 at 12:00

answered Feb 21, 2011 at 10:54

Martin Jespersen

26.3k8 gold badges60 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

tadywankenobi Over a year ago

Ah, I see! So can you make a suggestion as to what I should be doing here instead to output the div correctly?

Martin Jespersen Over a year ago

I have added a simple solution, but i see you accepted Felix' way of doing it while i was coding it ;)

tadywankenobi Over a year ago

Yeah, sorry! :D Needed to put it in place. Now if I could just find a way to make it pause on hover, I'd be laughing!

Felix Kling Over a year ago

Ah yeah, i*number is much simpler... forgot about that ;) (already gave you +1)

tadywankenobi Over a year ago

I don't really understand what the i*number does. Can you point me somewhere to read up on this? I need to add a loop onto this and a hover pause, so I'd like to understand this a bit more. Thanks.

|

Felix Kling · Accepted Answer · 2011-02-21 11:51:11Z

2

Also worth mentioning is that the calls to the effect methods don't block. That is why the loop is already finished before the first effect occurs.

You don't say what you actually want, but if you want to have every element appended and appear/disappear one after another, you can do something like this:

$(document).ready(function(){
    var obj = $('.item').detach();

    var count = obj.length;
    var target = $('.array');
    var display = function(i) {
        var element = $(obj[i]);
        var cb = (i < count-1) ? function(){display(i+1)} : function(){};
        element.appendTo(target).hide().fadeIn(250).delay(2000).fadeOut(250, cb);
    };
    display(0);
});

There is actually no need to use $.makeArray().

DEMO

edited Feb 21, 2011 at 11:51

answered Feb 21, 2011 at 11:10

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

4 Comments

Andy E Over a year ago

+1, that seems like a reasonable assumption and a good solution.

tadywankenobi Over a year ago

That's excellent, thanks a million! I'm actually looking to create a custom banner carousel type solution, so this works very well!

tadywankenobi Over a year ago

Ah poo. Can't accept two answers. I thought both your answers offered viable alternatives. Thanks for the effort Felix, much appreciated.

Felix Kling Over a year ago

@tadywankenobi: You're welcome :) @Martin's answer is better anyway imo.

Collectives™ on Stack Overflow

Javascript Array not working correctly with $.makeArray

2 Answers 2

6 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related