jQuery - Tying function to selector without an event?

Question

I am just learning how to define a function and call it back later. I am stuck trying to define 'this' in my function without using an event.

function slide() {
    var imgAlt = $(this).find('img').attr("alt"); 
    var imgTitle = $(this).find('a').attr("href"); 
    var imgDesc = $(this).find('.block').html();  
    var imgDescHeight = $(".main_image").find('.block').height(); 

    $(.active); 
    $(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 ,
                function() { 
                    $(".main_image .block").html(imgDesc).animate({ opacity: 0.85,  marginBottom: "0" }, 250 ); 
                    $(".main_image img").attr({ src: imgTitle , alt: imgAlt}); 
                }
            );
     }
   });

On line 6 you will see '$(.active); ' and this is where I want to select the class active and then apply the following function to it. Normally I used to setting this up on a click or something so I am unsure how to impliment it.

Any help greatly appreciated! Thanks

Here is a js fiddle where you can see the big picture: http://jsfiddle.net/wzQj6/21/

You're better off caching all those `$(this)`: http://stackoverflow.com/questions/5724400/does-using-this-instead-of-this-provide-a-performance-enhancement — Jared Farrish, Dec 12 '11 at 02:33

themerlinproject · Accepted Answer · 2011-12-12T02:46:08.990

See lines 3-4 in code below for how to cache your .active elements for reuse (and then use that instead of this!):

function slide() {

    //cache all .active elements for reuse
    var actives = $(".active");

    //use the new 'actives' variable instead of 'this'
    var imgAlt = actives.find('img').attr("alt"); 
    var imgTitle = actives.find('a').attr("href"); 
    var imgDesc = actives.find('.block').html();  
    var imgDescHeight = $(".main_image").find('.block').height(); 

    //$(.active); -- not sure what you were doing with this :p
    $(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 ,
                function() { 
                    $(".main_image .block").html(imgDesc).animate({ opacity: 0.85,  marginBottom: "0" }, 250 ); 
                    $(".main_image img").attr({ src: imgTitle , alt: imgAlt}); 
                }
            );
     }
   });

Cheers!

You don't want to use `$(actives)`; `actives` is already a jQuery object, so you can just do `actives.find...`, etc. — Jacob, Dec 12 '11 at 02:45
wow, that totally did the trick. That is such a useful thing to know. Thanks so much!!! — patrick, Dec 12 '11 at 02:46

score 0 · Answer 2 · answered Dec 12 '11 at 02:34

When you're calling a function, the this inside its scope (also called the context) is normally the object that owns and calls the said function. (i.e. with foo.bar(), inside bar(), this == foo normally.)

In Javascript, if you want to call a function AND specify what the function context is, you can use the call method like so:

bar.call(foo);
// inside bar, this == foo, even if foo wasn't the owner / caller of the function

You haven't posted the code for the function that you actually want to call, so I can't comment on whether or not this is the (most) correct way for you to do it, but from what I understand, this should work for you.

// take note, also, that your syntax for selecting .active is incorrect.
// you should be passing in a string.
var active_elements = $('.active');
some_function.call(active_elements);

I've posted a JS fiddle in the description to give it some context, thanks for your answer:) I'm trying to process it. I'm not a strong object oriented programmer....yet. — patrick, Dec 12 '11 at 02:44

score 0 · Answer 3 · edited May 23 '17 at 11:48

As far as I understood your question, you're looking for a way to call functions (jQuery methods too) on a scope, namely javascript context, that you prepare separatedly. If so, here's my code example and explanations.

var el = $('.active');
$.fn.animate.call(el, options, timeout, function() { 
  var active = this;
  // do whatever you need
});

jQuery animate function is defined in a jQuery.prototype namespace which is also a jQuery.fn.
There are two ways to call a function on a side context. They are apply and call. You may check out the difference between them here.

I hope I helped you.

jQuery - Tying function to selector without an event?

3 Answers3