Question

Here’s the code of my plugin..

$.fn.slide = function(settings) {

return $(this).each(function() {
    setInterval(function() { $.slider(opt.direction , opt.slideSpeed,this) }
}

jQuery.slider = function(direction,slideSpeed,elm) {
        console.log(elm) - > shows DOMWindow[] window as object 
    }

}


script.js   
$('#container').slide({
    slideAnimationTimeInterval : 6000,
    slideSpeed : 700,

}); 

console.log(elm) – > shows DOMWindow[] window as object but i need #container object how can i get it ?

Answer 1

When nesting functions, you need to save this in another variable like this:

return $(this).each(function() {
    var self = this;
    setInterval(function() { $.slider(opt.direction , opt.slideSpeed, self); }
}

this is the context of the function, by default it’s the global object window. jQuery sets it to something more useful when calling a function (e.g. an element in .each()). However, when your interval function is called, this is unbound again (=> this === window). By saving it in a custom variable, it’s preserved in the closure of your function.