Move element with jQuery plugin - setInterval

Question

Why this code doesn't work?
I wrote This code but:

(function($){
$.fn.newsSlider = function() {
    setTimeout(function() {
        this.each( function() {
            $(this).each(function(){
                $(this).append($(this).children(":first-child").clone());
                $(this).children(":first-child").remove();
            });
        });
    }, 3000);
}

}(jQuery));

With setInterval:
http://jsfiddle.net/OmidJackson/46UNg/
Without setInterval:
http://jsfiddle.net/OmidJackson/6bKWU/

are you really clear about every `$(this)` you use in your code? — jasonslyvia, Sep 07 '13 at 19:35

score 0 · Accepted Answer · edited May 23 '17 at 11:50

0

Your problem is that this has different meaning (the window object) inside the setTimeout function literal. Check this answer for further info about this in different contexts.

The solution is to save a reference to this so you can use it inside the setTimeout.
See this example.

edited May 23 '17 at 11:50

Community

1
1

answered Sep 07 '13 at 20:38

sudee

773
9
14

Tnx :) now I know about this – Omid Jackson Sep 07 '13 at 21:08

score 0 · Answer 2 · answered Sep 07 '13 at 20:40

You need to store the this as it currently has a value of window

var $this = this;
setTimeout(function() {
    $this.each( function() {
        $(this).each(function(){
            $(this).append($(this).children(":first-child").clone());
            $(this).children(":first-child").remove();
        });
    });
}, 3000);

Move element with jQuery plugin - setInterval

2 Answers2