Javascript 使用jquery选择元素附近的第一个h2

我对JS和JQuery都是新手，在选择一个元素制作动画时失败了，这是我的HTML

    <div class="box-product">
      <h2>Light</h2>
      <figure>
        <img src="img/boxes/light.jpg" alt="Pepper Box Light" title="Pepper Box Light" />
        <figcaption>
          Versão light, porém igualmente apimentada da nossa PepperBox, para quem quer se divertir com seu amor</figcaption>
      </figure>          
    </div><!-- box-product -->

但是什么也没发生，所以，我需要一些帮助

谢谢

最近的：

获取与选择器匹配的第一个元素，从当前元素开始，通过DOM树向上

您可以使用prev方法：

或：

最近的：

获取与选择器匹配的第一个元素，从当前元素开始，通过DOM树向上

您可以使用prev方法：

或：

使用因为所需的h2是figure的前一个同级，所以搜索所选项目的祖先以查找匹配项

$('.box-product figure').hover(function() {
    $h2 = $(this).prev('h2');
    $h2.animate({color: '#f00'}, 'slow')
}, function() {
    $h2.animate({color: '#000'}, 'slow')
});

使用因为所需的h2是figure的前一个同级，所以搜索所选项目的祖先以查找匹配项

$('.box-product figure').hover(function() {
    $h2 = $(this).prev('h2');
    $h2.animate({color: '#f00'}, 'slow')
}, function() {
    $h2.animate({color: '#000'}, 'slow')
});

返回dom树中父节点之间的元素。在鼠标悬停之前，您需要或只是获取元素：

从选择器$'.box product'开始，您可以使用或，但这将选择整个文档中的所有选项。如果您的框是唯一的，您也可以使用类似$box product h2的东西。

返回dom树中父节点之间的元素。在鼠标悬停之前，您需要或只是获取元素：

从选择器$'.box product'开始，您可以使用或，但这将选择整个文档中的所有选项。如果你的盒子是独一无二的，你也可以使用类似$box产品h2的东西。

h2是这个图的兄弟

h2是该图的兄弟

试试这个。。。 最近的第一个元素

​$('h2').siblings(':first')​;​

试试这个。。。 最近的第一个元素

​$('h2').siblings(':first')​;​

最近的方法从父层次结构中查找最近的匹配，而不是从子元素或同级元素中查找最近的匹配

在您的情况下，您只需要从父元素中查找子元素。像这样：

 $('.box-product figure').hover(function() {
     $(this).closest('.box-product').find('h2').animate({color: 'f00'}, 'slow')
 }, function() {
     $(this).closest('.box-product').find('h2').animate({color: 'inherit'}, 'slow')
 });

最近的方法从父层次结构中查找最近的匹配，而不是从子元素或同级元素中查找最近的匹配

在您的情况下，您只需要从父元素中查找子元素。像这样：

 $('.box-product figure').hover(function() {
     $(this).closest('.box-product').find('h2').animate({color: 'f00'}, 'slow')
 }, function() {
     $(this).closest('.box-product').find('h2').animate({color: 'inherit'}, 'slow')
 });

---

妈的，我尝试了所有的答案，没有任何改变，然后我看到了颜色f00，只是把颜色和这工作很好，谢谢！妈的，我尝试了所有的答案，没有任何改变，然后我看到了颜色f00，只是把颜色和这工作很好，谢谢！嘿，谢谢，prev也工作了，正如我在上面说的，我键入了错误的颜色，没有将其更改为f00。Firefox JS inspector上没有发生任何事情，也没有显示任何错误。嘿，谢谢，prev也工作了，正如我在上面说的，我键入了错误的颜色，如果不将其更改为f00，Firefox JS inspector上就不会发生任何事情，也不会显示任何错误。感谢您的快速回答，这很有效，但正如我在上面所说，颜色设置为f00，如果不将其更改为f00，则不会发生任何事情。感谢您的快速回答，这很有效，但正如我在上面所说，颜色设置为f00，如果不将其更正为f00，则不会发生任何事情。

​$('h2').siblings(':first')​;​

 $('.box-product figure').hover(function() {
     $(this).closest('.box-product').find('h2').animate({color: 'f00'}, 'slow')
 }, function() {
     $(this).closest('.box-product').find('h2').animate({color: 'inherit'}, 'slow')
 });