javascript - How do I use the child element of 'this' as a selector in jQuery?

Question

I have a function that calls when the user mouseover a certain div. The function shows a different div, but the issue is that it shows all of the divs with that class.

Here's the JS:

$('.edit-image').mouseover(
  function(e){
  $('.edit-image-link').show();
});

What I want it to do is only show the .edit-image-link div if it's a child of the element that the user has their mouse over.

Answer 1

You can use .find() to fetch only the descendant elements of an element based on a selector.

$('.edit-image').mouseover(function (e) {
    $(this).find('.edit-image-link').show();
});

or you can pass a context to jQuery for searching a selector

$('.edit-image').mouseover(function (e) {
    $('.edit-image-link', this).show();
});

Note: Inside a jQuery callback method like event handlers, this will refer the to current dom element

_{I personally prefer the first method}