Jquery - For loop inside a DIV

Question

You guys, good morning.

Simple:

I’m giving a For a div:

<div class="Laço">
   <div class="ItemLaco"></div>
   <div class="ItemLaco"></div>
   <div class="ItemLaco"></div>
</div>

Now I need to give a For and that it dynamically leave the current of the visible loop and the previous invisible! is possible?

<script>
$(function () {
    this.class
    setInterval($(".ItemLaco").each(function (index, element) {
        alert(element);
    }),5000);
});

Answer 1

Your code has some problems, but I imagine you want to do an effect slideshow, changing div.

You can do it like this:

$(function () {
    var divs = $(".ItemLaco");
    var mostra = 0;

    function slide() {
        mostra++;
        if (mostra == divs.length) mostra = 0;
        divs.removeClass('mostrar');
        divs.eq(mostra).addClass('mostrar');
    }

    setInterval(slide, 2000);
});

jsFiddle: http://jsfiddle.net/Lwyo427a/

The this.class that you have doesn’t make sense, I don’t understand what you wanted to do with it and so I can’t fix anything.

In the setInterval you should take a look to this question/answer, is the same problem, which means you have to pass a function as an argument to setInterval use/call x in x time.

Then you have $(".ItemLaco").each, it is not very clear what you want to do but in jQuery methods applied to collections of elements are applied to everyone. For example how I used on top ivs.removeClass('mostrar'); removes the CSS class from all elements of that collection, even if some do not have it.

I used CSS classes to show and hide:

.ItemLaco {
    display: none;
}
.mostrar {
    display: block;
}

because it’s better this way, cleaner and everything is in CSS.