Question

我是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 -->

当用户将鼠标悬停在h2时，我正在尝试选择figure，这是我最好的猜测：

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

但没有任何反应，所以，我需要一些帮助。

谢谢！

Answer 1

closest():

获取与选择器匹配的第一个元素，从当前元素开始并逐步向上遍历DOM树。

您可以使用prev()方法：

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

或：

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

Answer 2

使用.prev()，因为所需的h2是figure的上一个兄弟，.closest()会搜索所选项目的祖先以进行匹配。

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

FIDDLE

Answer 3

closest()在父节点中返回dom树中的元素。您需要siblings("h2")或prev()才能在悬停<figure>之前获取元素：

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

从选择器$('.box-product')开始，您可以使用find("h2")或children("h2")，但这会在整个文档中选择所有这些内容。如果您的框是唯一的，您也可以使用$("#box-product h2")之类的内容。

Answer 4

h2是figure的兄弟姐妹。

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

Answer 5

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

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

Fiddle

Answer 6

nearest（）方法从父级层次结构中找到最接近的匹配，而不是从子元素或兄弟元素中找到。

在你的情况下，你需要从父母那里找到子元素。像这样：

 $('.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')
 });

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

6 个答案: