up vote 1 down vote favorite

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

share|improve this question

2 Answers

up vote 3 down vote accepted

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/

share|improve this answer
Ah, I see! So can you make a suggestion as to what I should be doing here instead to output the div correctly? – tadywankenobi Feb 21 '11 at 11:03
I have added a simple solution, but i see you accepted Felix' way of doing it while i was coding it ;) – Martin Jespersen Feb 21 '11 at 11:57
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! – tadywankenobi Feb 21 '11 at 12:33
Ah yeah, i*number is much simpler... forgot about that ;) (already gave you +1) – Felix Kling Feb 21 '11 at 13:00
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. – tadywankenobi Feb 21 '11 at 14:39
show 1 more comment
up vote 2 down vote

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

share|improve this answer
+1, that seems like a reasonable assumption and a good solution. – Andy E Feb 21 '11 at 11:23
That's excellent, thanks a million! I'm actually looking to create a custom banner carousel type solution, so this works very well! – tadywankenobi Feb 21 '11 at 11:54
Ah poo. Can't accept two answers. I thought both your answers offered viable alternatives. Thanks for the effort Felix, much appreciated. – tadywankenobi Feb 23 '11 at 10:11
@tadywankenobi: You're welcome :) @Martin's answer is better anyway imo. – Felix Kling Feb 23 '11 at 10:17

Your Answer

 
or
required, but never shown
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.