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

【问题标题】：Select the first h2 near a element with jquery使用 jquery 选择元素附近的第一个 h2
【发布时间】：2012-08-03 04:48:13
【问题描述】：

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

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

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

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

谢谢！

【问题讨论】：

标签： javascript jquery jquery-ui jquery-selectors

【解决方案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')
});

【讨论】：

感谢您的快速回答，这行得通，但就像我在上面说的那样，颜色设置为f00，没有更正为#f00，什么也没发生。

【解决方案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

【讨论】：

【解决方案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") 之类的东西。

【讨论】：

嘿，谢谢，prev() 也有效，正如我在上面所说，我输入了错误的颜色，没有将其更改为 #f00 没有发生任何事情，Firefox JS 检查器上也没有显示错误.

【解决方案4】：

h2 是figure 的兄弟姐妹。

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

【讨论】：

该死，我尝试了所有答案，但没有任何改变，然后我看到颜色f00，只需输入#，效果很好，谢谢！

【解决方案5】：

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

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

Fiddle

【讨论】：

【解决方案6】：

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

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

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

【讨论】：