JQuery如何仅选择当前li而不选择父级

Question

如何使用 JQuery 选择当前 li 而不是其父级。

在下面的示例中，当我将鼠标悬停在具有父 li 的 li 上时，“世界”将显示在父级以及当前 li 上。

我想只显示当前li中的“世界”。

我该怎么做？

风格:

a.show-anyway
{
  display: block;
}
a.world
{
  display: none;
}
a.active
{
  display: block;
}

列出项目:

<ul class="currentlist">
<li><a href="#" class="show-anyway">hello</a><a href="#" class="world">world</a>
<li><a href="#" class="show-anyway">hello</a><a href="#" class="world">world</a>
 <ul>
   <li><a href="#" class="show-anyway">hello</a><a href="#" class="world">world</a></li>
   <li><a href="#" class="show-anyway">hello</a><a href="#" class="world">world</a></li>
 </ul>
</li>
<li><a href="#" class="show-anyway">hello</a><a href="#" class="world">world</a></li>
<li><a href="#" class="show-anyway">hello</a><a href="#" class="world">world</a>
 <ul>
   <li><a href="#" class="show-anyway">hello</a><a href="#" class="world">world</a></li>
   <li><a href="#" class="show-anyway">hello</a><a href="#" class="world">world</a></li>
 </ul>
</li>
<li><a href="#" class="show-anyway">hello</a><a href="#" class="world">world</a></li>

JQuery:

$(document).ready(function() {
  $('.currentlist li').hover(function() {
    $(this).find('a').addClass('active');
  }, function() {
    $(this).find('a').removeClass('active');
  });
});

Answer 1

您需要在进入/离开 child 时抓取 parent 并添加/删除类(class)，如下所示:

$(function() {
  $('.currentlist li').hover(function() {
    $(this).children('a').addClass('active').end()
           .parents().children('a').removeClass('active');
  }, function() {
    $(this).children('a').removeClass('active').end()
           .parents().children('a').addClass('active');
  });
});​

You can give it a try here ，这会抓取 parent 并从他们的 <a> 中删除该类(class)。 child 进入时恢复，离开时恢复，尝试一下演示，我想这就是你想要的。