jquery选择最近的div

Question

Categories div是隐藏的，我想让它在toggler悬停时显示。任何帮助都将不胜感激。

html

<div class="categorization">
 <a href="#" class="toggler">something</a>

 <div class="categories">
 </div>

</div>

我试过了。

jquery

  $(".categorization .toggler").hover(function() {
   $(this).closest('.categories').show();
  }, function(){
   $(this).closest('.categories').hide();
  });

Answer 1

closest()遍历祖先树，所以它不是您要找的。您可以使用nextAll()和first()来实现您想要的功能：

$(".categorization .toggler").hover(function() {
    $(this).nextAll(".categories").first().show();
}, function(){
    $(this).nextAll(".categories").first().hide();
});

请注意，next()只匹配下一个元素，因此只有当<div>元素紧跟在您的toggler元素之后时，next(".categories")才会起作用。

Answer 2

var categoryDiv = $(this).next('div'); // or
var categoryDiv = $(this).next('.categories');

这将使您获得相对于toggler的下一个div同级。

Answer 3

请注意：

在jquery API中，

.closest()：获取与选择器匹配的第一个祖先元素，从当前元素开始，向上遍历DOM树。

显然，您的元素不是

请参阅http://api.jquery.com/closest/

在这种情况下，如果只想获取一个元素，则应该尝试使用.next()；如果希望获得与选择器匹配的所有元素，则应该尝试使用.nextAll()。