Javascript Jquery查找最近的元素

这是我的html代码：

<div class="single-img"></div>
<h4>The title</h4>
<h4>The title 2</h4>
<div class="single-img"></div>

<div class="single-img"></div>
<h4>The title 3</h4>
<h4>The title 4</h4>
<div class="single-img"></div>

我想要的是，如果我将鼠标悬停在h4上，它将找到更接近的div.single-img并向其添加类，它要么是上一个div.single-img，要么是下一个div.single-img

例如，如果我将鼠标悬停在

上，标题

if将向上一个div.single-img添加类，那么如果我将鼠标悬停在

标题2上，标题

将向下一个div.single-img添加类

---

我发现我不能使用

.closest

，因为它在树中查找的不是兄弟姐妹。

请尝试

$（“h4”）.prev（“div.single-img”）

以下是一个示例，当您将鼠标悬停在h4上方时，它将用蓝色突出显示兄弟姐妹div中的文本

.悬停{
颜色：蓝色
}
$（函数（）{
$（“h4”）.mouseenter（函数（）{
//找到最近的div.single-img并添加类“hover”；
if（$（this）.next（）.hasClass（'single-img'））{
$（this.next（）.addClass（'hover'）；
}else if（$（this.prev（）.hasClass（'single-img'））{
$（this.prev（）.addClass（'hover'）；
}
}).mouseleave（函数（）{
//找到最近的div.single-img并删除类“hover”；
if（$（this）.next（）.hasClass（'single-img'））{
$（this.next（）.removeClass（'hover'）；
}else if（$（this.prev（）.hasClass（'single-img'））{
$（this.prev（）.removeClass（'hover'）；
}
});
});
试验区1
标题
标题2
试验区2
试验区3
标题3
标题4
试验区4

您可以使用jQuery的

.index（）

查找父元素下每个元素的位置，然后通过减去它们的索引来查找它们之间的距离。当您获取绝对值

Math.abs（…）

时，它会忽略负号（因此它是在目标元素之前还是之后都不重要）

然后只需排序并返回距离最短的元素。请参见以下示例：

var findNearestSib=函数（元素）{
变量t=$（元素）；
var ind=t.index（）；
var sibs=t.sibles（'div.single-img'）；//筛选出目标同级
var=sibs.map（函数（i，e）{
var cur=$（e）.index（）；//当前元素的索引
返回{
dist:Math.abs（cur-ind），//兄弟姐妹和h4之间的距离
元素：e
};
}).toArray（）.sort（函数（a，b）{
返回a.dist-b.dist；//按最短距离排序
});
if（最接近的长度）{
返回最近的[0]。元素；//返回最近的元素
}
}
$（“h4”）.mouseenter（函数（）{
$（findNearestSib（this））.addClass（'hover'）；
}).mouseleave（函数（）{
$（findNearestSib（this））.removeClass（'hover'）；
});
div.single-img{
背景颜色：蓝色；
高度：12px；
边框：2倍纯白；
}
单兵悬停{
背景颜色：绿色；
}

标题
标题2
标题3
标题4
有两个
单个img
哪一个悬停在第一个h4上会选择它前面的div，而悬停在第二个h4上会选择它后面的div？您好@j08691，是的！谢谢你！我要试试这个。：）非常感谢你！它确实如预期的那样起作用。在mouseleave中，我只放了$（'.single img'）.removeClass（'hover'）；好东西。。。很乐意帮忙。
$("h4").mouseenter(function() {
    //Find the closest div.single-img and add class "hover";        
}).mouseleave(function() {
    //Find the closest div.single-img and remove class "hover";
});