I am trying to build a media playlist that can advance the credits, play the video and change the title on thumb-hover, end of video and on next/prev click. So I need to write some functions that can then be called together. So like this:

    function showBox()
    {
        $(this).parents('.container').find('.box').show();
    };
    
    function hideBox()
    {
        $(this).parents('.container').find('.box').hide();
    };
    
    $('a').hover(
        function()
        {
            showBox();
        },
        function()
        {
            hideBox();
        }
    );

The problem is that $(this) does not carry through to the functions from the .hover. How do I do this?

I am trying to build a media playlist that can advance the credits, play the video and change the title on thumb-hover, end of video and on next/prev click. So I need to write some functions that can then be called together. So like this:

    function showBox()
    {
        $(this).parents('.container').find('.box').show();
    };
    
    function hideBox()
    {
        $(this).parents('.container').find('.box').hide();
    };
    
    $('a').hover(
        function()
        {
            showBox();
        },
        function()
        {
            hideBox();
        }
    );

The problem is that $(this) does not carry through to the functions from the .hover. How do I do this?

• javascript
• jquery
• function
• this

6 Answers 6

Per @patrickdw's answer, jQuery sets the scope of a callback for an event to the DOM element upon which the event was fired. For example, see the eventObject parameter in the documentation for the click() handler.

My original answer (below) is useful when you want to create a jQuery plug-in so that you may invoke your own custom methods on jQuery objects and have the jQuery object set as this during execution. However, it is not the correct and simple answer to the original question.

// Within a plug-in, `this` is already a jQuery object, not DOM reference
$.fn.showBox = function(){ this.parents('.container').find('.box').show(); };
$.fn.hideBox = function(){ this.parents('.container').find('.box').hide(); };
$('a').hover(
  function(){ $(this).showBox() },
  function(){ $(this).hideBox() }
);

Edit: Or, if (as suggested) you want to add only one name to the ~global jQuery method namespace:

$.fn.myBox = function(cmd){
  this.closest('.container').find('.box')[cmd]();
};

$('a').hover(
  function(){ $(this).myBox('show') },
  function(){ $(this).myBox('hide') }
);

Or more generally:

$.fn.myBox = function(cmd){
  switch(cmd){
    case 'foo':
      ...
    break;
    case 'bar':
      ...
    break;
  }
  return this;
};

For more information, see the jQuery Plugin Authoring Guide.

The this will carry through if you just do:

$('a').hover(showBox,hideBox);

EDIT: To address the question in the ment, this will work for any function you assign as an event handler. Doesn't matter if it is an anonymous function or a named one.

This:

$('a').click(function() { 
    alert( this.tagName ); 
});

...is the same as:

function alertMe() {
    alert( this.tagName );
}

$('a').click( alertMe );

...or this:

function alertMe() {
    alert( this.tagName );
}

$('a').bind('click', alertMe );

In Javascript you can use call() or apply() to execute a function and explicitly specify this for it:

$('a').hover(
    function()
    {
        showBox.call(this);
    },
    function()
    {
        hideBox.call(this);
    }
);

The first parameter given to call() specifies the object that this will refer to in the function. Any further parameters are used as parameters in the function call.

You need to modify your code to something like this:

function showBox(elem)
{
    elem.parents('.container').find('.box').show();
};

function hideBox(elem)
{
    elem.parents('.container').find('.box').hide();
};

$('a').hover(
    function()
    {
        var $this = $(this);

        showBox($this);
    },
    function()
    {
        var $this = $(this);

        hideBox($this);
    }
);

$('a').hover(function() {
    $(this).closest('.container').find('.box').show();
}, function()  {
    $(this).closest('.container').find('.box').hide();
});

Add parameters to showBox and hideBox so that they can accept the element, and then call showBox($(this)) and hideBox($(this)).