Catch the Children of an Object

Question

I’m trying to add and remove classes only to the div that has Hover, but I can’t because I have 4 Divs with class .image. The same is true for all Ivs.

Here’s the code:

$(document).ready(function() {
    $('.image').hover(function(e) 
        $(e).children('.button').addClass('animated zoomIn');
        $(e).children('.button').css("opacity", "1");
        setTimeout(function() {
            $(e).children('.button').removeClass('animated zoomIn');
           }, 1000);
    }, function(e) { 
        $(e).children('.button').addClass('animated zoomOut');
        setTimeout(function() {
            $(e).children('.button').removeClass('animated zoomOut');
           }, 300);
        $(e).children('.button').css("opacity", "0");
    });
});

Answer 1

When you have $('.image').hover(function(e) { the e is the event that happened. This object has children, what you seek is the this that within that function is the element that received the hover.

Within the setTimeout the this is already another, so it is better to cache the element(s) out of this setTimeout.

So you need to change to:

$(document).ready(function() {
    $('.image').hover(function(e) {
        var $children = $(this).children('.button');
        $children.addClass('animated zoomIn').css("opacity", "1");
        setTimeout(function() {
            $children.removeClass('animated zoomIn');
        }, 1000);
    }, function(e) {
        var $children = $(this).children('.button');
        $children.addClass('animated zoomOut');
        setTimeout(function() {
            $children.removeClass('animated zoomOut').css("opacity", "0");
        }, 300);
    });
});

Answer 2

I think instead of using:

 $(e).children('.button').addClass('animated zoomIn');

You should use:

 $(this).children('.button').addClass('animated zoomIn');

The this in this case refers to the element in which the event was currently captured hover. The parameter e is actually an object, containing various information of the applied event.

See my example working:

$(function () {
       $('.image').hover(function () {
          $(this).children('.button')
               .addClass('red');
       
      }, function () {
           $(this).children('.button')
               .removeClass('red');
      });
});

.image{
     height:100px;
     width: 100px;
     background-size: 100% auto;
     background-repeat: no-repeat;
}

.red{
  background-color: #800;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="image" style="background-image: url(https://placeholdit.imgix.net/~text?txtsize=33&txt=Imagem%20de%20Teste&w=150&h=150);">
  <button class="button">Hello</button>
</div>

<div class="image" style="background-image: url(https://placeholdit.imgix.net/~text?txtsize=33&txt=Imagem%20de%20Teste&w=150&h=150);">
  <button class="button">Hello</button>
</div>

<div class="image" style="background-image: url(https://placeholdit.imgix.net/~text?txtsize=33&txt=Imagem%20de%20Teste&w=150&h=150);">
  <button class="button">Hello</button>
</div>

Updating

As the context of the anonymous function used by setTimeout is not bound to the jQuery element, it is necessary to reference it within `setTimeout.

@Sergio explained in his reply how to solve this problem by defining a variable referencing the jQuery selector and using it within setTimeout. But if you prefer, jQuery offers a solution through a function called $.proxy.

See what the code would look like:

$(Document). ready(Function() { $('. image'). Hover(Function(and) {

    $(this).children('.button').addClass('animated zoomIn').css("opacity", "1");

    setTimeout($.proxy(function() {
        $(this).removeClass('animated zoomIn');
    }, this), 1000);

}, function(e) {

    $(this).children('.button').addClass('animated zoomOut');

    setTimeout($.proxy(function() {
        $children.removeClass('animated zoomOut').css("opacity", "0");
    }, this), 300);
});

});

The $.proxy is intended to apply link a context to the function. That is, you define through it "who" will be the this used by function.

Example:

$(function ()
{
    setTimeout($.proxy(function () {
         alert(this.name);
    }, {name: "Wallace"}), 1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>