JQuery 如何选择当前列表项中的所有 anchor ？

Question

我希望，当我将鼠标悬停在列表项上时，使用 JQuery 显示和隐藏一些 anchor 标记。

如何使用 $(this) 循环遍历列表项中的当前 anchor ？

这是我到目前为止所拥有的:

$(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

试试这个:

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

其中 $(this) 指的是悬停的 li ，而 $('a', $(this)) 上下文选择器用于找到其中的所有链接并添加/删除类。