Trying to access a div from an anchor with a jQuery function using "this"

Question

I'm trying to animate a div inside of a link tag.

HTML:

<li><a href="#">INFO <div></div></a></li>

I'm using a jQuery function like so to figure out which of the links is being interacted with.

function slideMenu(e) {

  if(e.type === "mouseover"){
    console.log("mouseover");
    //console.log(this > bgColor);

    // TweenMax.to($(this > div) , 1, {height:200});
  }
  else if(e.type === "mouseout"){
    console.log("mouseout");
  }
  else if(e.type === "click"){
    console.log("click");
  }

}

$(".menu a").click(slideMenu);

$(".menu a").mouseover(slideMenu);

$(".menu a").mouseout(slideMenu);

I'm trying to use greensock and grab the div inside of the anchor tag and change the height, but it doesn't seem to be giving me access to that div tag.

Answer 1

The div is a child of the element binded with $(this).
You can use .find() to target it.

$("a").on("click",function(e){
  e.preventDefault();
  $(this).find("div").html("I'm here!");
});

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

<ul>
  <li><a href="#">INFO <div>Click me.</div></a></li>
</ul>