jQuery $(this).next() not working as expected

Question

I am attempting to create a simple dropdown that is triggered by a hover event. To save on writing code I want to take advantage of the $(this) selector but I keep running into a problem when I try to target $(this) next 'a' element. Does anyone know the correct way to code this while still using the $(this) selector?

In the below code if I change $(this).next('a') to $('.base a') the code works fine but then I would have to write the same block of jQuery code for each time I want to use this feature using a different class selector each time.

Jquery code:

var handlerIn = function() {
var t = setTimeout(function() {
        $(this).next('a') <==== Problem is here
        .addClass('active')
        .next('div')
        .animate({'height':'show'}, {duration:'slow', easing: 'easeOutBounce'});
}, 400);
$(this).data('timeout', t);   
} ;

var handlerOut = function() {
clearTimeout($(this).data('timeout'));
$(this).next('a') <==== Problem is here
  .removeClass('active')
  .next('div')
  .slideUp();

};

$('.base').hover(handlerIn, handlerOut);

HTML code:

<div id="info" class="base">
<a href="#" id="info-link" title=""></a>
        <div id="expanded-info">
               <!-- Stuff here -->              
         </div>
</div>

So I also tried with no luck...any ideas:

var handlerIn = function(elem) {
var t = setTimeout(function() {
        $(elem).next('a') 
        .addClass('active')
        .next('div')
        .animate({'height':'show'}, {duration:'slow', easing: 'easeOutBounce'});
}, 400);
$(elem).data('timeout', t);   
} ;

var handlerOut = function(elem) {
clearTimeout($(elem).data('timeout'));
$(elem).next('a') 
  .removeClass('active')
  .next('div')
  .slideUp();

};
$('.base').hover(handlerIn($(this)), handlerOut($(this)));

Joe · Answer 1 · 2012-02-24T18:56:26.707

2

JavaScript is function scoped, not block scoped:

var handlerIn = function() {
    var self = this;
    var t = setTimeout(function() {
        $(self).next('a')
            .addClass('active')
            .next('div')
            .animate({'height':'show'}, {duration:'slow', easing: 'easeOutBounce'});
        }, 400);
    $(this).data('timeout', t);   
};

edited Feb 24 '12 at 18:56

answered Feb 24 '12 at 18:33

Joe

80,724
18
127
145

Right idea, but you placed `var self = this` outside of the context of `handlerIn` (where `this` is actually the element in play). – Chris Pratt Feb 24 '12 at 18:39
@ChrisPratt, yes, thank you! The code wasn't formatted clearly, which always leads to this kind of mistake on my part. – Joe Feb 24 '12 at 18:57

score 0 · Answer 2 · answered Feb 24 '12 at 18:36

Try supplying $(this) as a parameter in your hover function and then changing all your $(this) calls in your handler functions to the parameter:

$(".base").hover(handlerIn($(this)), handlerOut($(this)));

And your new functions:

function handlerIn( elem ){
    elem.next('a')
        .fadeIn(); // or whatever you plan on doing with it
}

Same concept with handlerOut.

score 0 · Answer 3 · answered Feb 24 '12 at 18:38

0

When you use $('.base a') you don't have a next element because a is nested inside, you should use $(this).children('a') instead.

answered Feb 24 '12 at 18:38

Alfonso

326
1
10

score 0 · Answer 4 · answered Feb 24 '12 at 18:49

var handlerIn = function() {
    var $base = $(this);
    var t = setTimeout(function() {
        $base.next('a')
            .addClass('active')
            .next('div')
            .animate({'height':'show'}, {duration:'slow', easing: 'easeOutBounce'});
    }, 400);
    $base.data('timeout', t);   
};

var handlerOut = function() {
    var $base = $(this);
    clearTimeout($base.data('timeout'));
    $base.next('a')
        .removeClass('active')
        .next('div')
        .slideUp();

};

$('.base').hover(handlerIn, handlerOut);

jQuery $(this).next() not working as expected

4 Answers4

Linked