Question

I wish to, using JQuery, show and hide some anchor tags as I hover over a list item.

How do you loop through the current anchors within a list item using $(this) ?

Here’s what I have so far:

$(document).ready(function() {
    $('.currentlist > li').mouseover(function(event){
        // loop through each anchor tag within this list using $(this)
        // and add the .active class
    });
    $('.currentlist > li').mouseout(function(event){
        // loop through each anchor tag within this list using $(this)
        // and remove the .active class
    });
});


a .active
{
  display: block;
}

a.edit-icon
{
  display: none;
}

a.delete-icon
{
  display: none;
}

<ul class="currentlist">
    <li><a href="#" class="active">index</a><a href="#" class="edit-icon">edit</a><a href="#" class="delete-icon">delete</a></li>
    <li><a href="#" class="active">profile</a><a href="#" class="edit-icon">edit</a><a href="#" class="delete-icon">delete</a></li>
    <li><a href="#" class="active">contactus</a><a href="#" class="edit-icon">edit</a><a href="#" class="delete-icon">delete</a></li>
    <li><a href="#" class="active">findus</a><a href="#" class="edit-icon">edit</a><a href="#" class="delete-icon">delete</a></li>
</ul>

Answer 1

Try this:

$(document).ready(function() {
    $('.currentlist > li').mouseover(function(event){
      $(this).find('a').addClass('active');
    });
    $('.currentlist > li').mouseout(function(event){
      $(this).find('a').removeClass('active');
    });
});

Where $(this) refers to hovered li and $('a', $(this)) context selector is used to find all links inside them and add/remove classes.