将鼠标悬停在一个div上以显示某个类的最近div

Question

我想将鼠标悬停在一个div上并使用jquery按名称查找最近的div并显示该div。

<div class="entry">
  <div class="body"></div>
  <div class="date"></div>
  <div class="footer"></div>

  <div class="body"></div>
  <div class="date"></div>
  <div class="footer"></div>

  <div class="body"></div>
  <div class="somethingelse"></div>
  <div class="footer"></div>
</div>

所有.footer类都将被隐藏，但我想这样做，以便当我遍历.body类时，只有最近的.footer类显示。 [意思是：如果我将鼠标悬停在第一个.body类上，只会显示第一个.footer。 ]

我当前的代码无效，我开始怀疑它是否有问题。

当前的jquery代码：

$('.footer').hide();
$('.body').hover(function(){
     $(this).closest('.footer').find('.footer').show();
});

Answer 1

虽然问题与this question相同，但原因略有不同。

当您使用.closest(".class")它相当于.parents().filter(".class").first()（或.last()时，我不会回想起parents()的工作方式与{＆1}}相同＃39; s closest的用途。）

即它上升到树

因此$(".body").closest(".entry")会为您提供HTML元素。

在这种情况下，你想要兄弟姐妹，但更具体地说是下一个兄弟姐妹。有一个jquery方法.next()看起来是正确的，但正如上面链接中详述的那样，这只会给出下一个（在你的HTML中这将是date div）即使应用了过滤器 - 因此$(this).next(".footer")会给出一个空集（因为它不是.date）。

解决方法是：

$(this).nextAll(".footer").first()

一旦你开始工作，你会发现你的悬停不能按预期工作，因为页脚没有再次隐藏 - 因为你正在使用.hover而不是mouseenter {{1 ，你只需要在第二个事件处理程序中移动mouseout调用，给出：

＆＃13;

＆＃13;

.hide()

＆＃13;

// startup
$(".footer").hide();

// event
$(".body").hover(function() {
    $(this).nextAll(".footer").first().show();
}, function() {
    $(".footer").hide();
});

＆＃13;

div > div { width: 100px; height: 10px }
.body { border: 1px solid red; }
.date { border: 1px solid blue; }
.footer { border: 1px solid green; }

＆＃13;

＆＃13;

＆＃13;

Answer 2

$(this).closest('.footer')

您应该开始使用console.log（）来检查您想要获取的元素。这没有找到任何进一步搜索和显示的东西。

如果你可以将身体和页脚分隔成容器，你可以做得像 this。

Answer 3

尝试使用 nextUntil(".footer").next(); ，如下所示

＆＃13;

＆＃13;

$('.body').hover(function() {
  $(this).nextUntil(".footer").next().show();
}, function() {
  $(".footer").hide();
});

＆＃13;

body {
  font: 13px Verdana;
}

.footer {
  display: none;
  color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="entry">
  <div class="body">body</div>
  <div class="date">date</div>
  <div class="footer">footer</div>

  <div class="body">body</div>
  <div class="date">date</div>
  <div class="footer">footer</div>

  <div class="body">body</div>
  <div class="somethingelse">somethingelse</div>
  <div class="footer">footer</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

answer by freedomn-m提供了一个很好的解释和良好的解决方案，以防您想要最近的 NEXT .footer，这似乎是您的示例HTML中的情况。

但是，如果您严格要求自己的请求，那么您需要完全 NEAREST .footer，那么他的解决方案将不适合您。而且我不认为有一个jQuery内置功能可以为您提供，所以您必须手动完成。获取父级的子级列表（不要使用兄弟姐妹，因为他们不包含当前元素）并浏览列表以使用索引计算当前元素的距离，然后选择.footer实际上是最近的。

＆＃13;

＆＃13;

$('.body').hover(function() {
  var children = $(this).parent().children();
  var index = children.index(this);
  var closest = children.length;
  var footer = -1;
  children.each(function(i, child) {
    if (i !== index && $(child).hasClass("footer")) {
      var distance = Math.abs(index - i);
      if (distance < closest) {
        closest = distance;
        footer = i;
      }
    }
  });
  if (footer > -1)
    children.eq(footer).show();
}, function() {
  $(".footer").hide();
});

＆＃13;

body {
  font: 13px Verdana;
}

.footer {
  display: none;
  color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="entry">
  <div class="body">body</div>
  <div class="date">date</div>
  <div class="footer">footer</div>

  <div class="body">body</div>
  <div class="date">date</div>
  <div class="footer">footer</div>

  <div class="body">body</div>
  <div class="somethingelse">somethingelse</div>
  <div class="footer">footer</div>
</div>

＆＃13;

＆＃13;

＆＃13;

如果你不太关心性能，你可以通过选择.footer而不是父节点的子节点来缩短代码，然后让jQuery给你索引他们每个人。效率不高，但代码更短：

＆＃13;

＆＃13;

$('.body').hover(function() {
  var index = $(this).index();
  var closest = 9999;
  var footer;
  $(this).siblings(".footer").each(function(i, sibling) {
    var distance = Math.abs(index - $(sibling).index());
    if (distance < closest) {
      closest = distance;
      footer = sibling;
    }
  });
  if (footer !== undefined)
    $(footer).show();
}, function() {
  $(".footer").hide();
});

＆＃13;

body {
  font: 13px Verdana;
}

.footer {
  display: none;
  color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="entry">
  <div class="body">body</div>
  <div class="date">date</div>
  <div class="footer">footer</div>

  <div class="body">body</div>
  <div class="date">date</div>
  <div class="footer">footer</div>

  <div class="body">body</div>
  <div class="somethingelse">somethingelse</div>
  <div class="footer">footer</div>
</div>

＆＃13;

＆＃13;

＆＃13;

受自由评论的启发，我们还可以使用.prevAll()和.nextAll()方法获取上一个和下一个.footer兄弟姐妹。这两个方法返回最接近的兄弟姐妹，所以我们只需选择每个列表中的第一个，从元素的索引中减去它们的索引（找到距离），将它们一起比较，然后返回最接近的。此解决方案的效率也低于第一个，但您可能会发现代码更易于阅读：

＆＃13;

＆＃13;

$('.body').hover(function() {
  var me = $(this);
  var prev = me.prevAll(".footer").first();
  var next = me.nextAll(".footer").first();

  if (prev.length == 0)
    next.show();
  else if (next.length == 0)
    prev.show();
  else {
    index = me.index();
    if (Math.abs(prev.index() - index) < Math.abs(next.index() - index))
      prev.show();
    else
      next.show();
  }
}, function() {
  $(".footer").hide();
});

＆＃13;

body {
  font: 13px Verdana;
}

.footer {
  display: none;
  color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="entry">
  <div class="body">body</div>
  <div class="date">date</div>
  <div class="footer">footer</div>

  <div class="body">body</div>
  <div class="date">date</div>
  <div class="footer">footer</div>

  <div class="body">body</div>
  <div class="somethingelse">somethingelse</div>
  <div class="footer">footer</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 5

IF 你的html会保留那些三元组布局，你不需要jQuery。 只需使用CSS在hover上的.body后选择第二个div

＆＃13;

＆＃13;

div{width:100px; height:100px; background-color:lime; margin:10px; float:left}

.body{background:yellow; clear:left;}
.footer{display:none;}

.body:hover + div + div{
  display:block;
  background:red;
}

＆＃13;

<div class="body"></div>
  <div class="date"></div>
  <div class="footer"></div>

  <div class="body"></div>
  <div class="date"></div>
  <div class="footer"></div>

  <div class="body"></div>
  <div class="somethingelse"></div>
  <div class="footer"></div>

＆＃13;

＆＃13;

＆＃13;