jQuery的查找最接近元素

喜欢的东西，这是我的html代码：jQuery的查找最接近元素

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

然后jQuery代码是这样的：

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

我要的是，如果我将鼠标悬停在H4它会找到越接近div.single-img并向其添加类，它就是以前的div.single-img或下一个div.single-img。

因此，例如，如果我悬停在<h4>The title</h4>如果将类添加到以前的div.single-img，那么如果我将鼠标悬停在<h4>The title 2</h4>上，它会将类添加到下一个div.single-img。

我发现我不能使用.closest，因为它在树中寻找而不是兄弟姐妹。

来源

2017-03-09 Jerick Allan Sernal Dimaano

有两个'单img'其中一个 – guradio

所以悬停在第一H4之前，将选择div和悬停在第二H4将选择div之后呢？ – j08691

Hi @ j08691，是的，这是正确的！ –

下面是当你将鼠标悬停在关闭H4将突出这些同胞div的蓝色文字的样本。

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
    <style> 
 
     .hover { 
 
      color: blue 
 
     } 
 
    </style> 
 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
    <script> 
 
     $(function() { 
 
      $("h4").mouseenter(function() { 
 
       //Find the closest div.single-img and add class "hover"; 
 
       if ($(this).next().hasClass('single-img')) { 
 
        $(this).next().addClass('hover'); 
 
       } else if ($(this).prev().hasClass('single-img')) { 
 
        $(this).prev().addClass('hover'); 
 
       } 
 
      }).mouseleave(function() { 
 
       //Find the closest div.single-img and remove class "hover"; 
 
       if ($(this).next().hasClass('single-img')) { 
 
        $(this).next().removeClass('hover'); 
 
       } else if ($(this).prev().hasClass('single-img')) { 
 
        $(this).prev().removeClass('hover'); 
 
       } 
 
      }); 
 
     }); 
 
    </script> 
 
</head> 
 
<body> 
 

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

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

 

 
</body> 
 
</html>

来源

2017-03-09 01:58:19 rasmeister

感谢您的支持！我会尝试这一个。 :) –

非常感谢你！它确实按预期工作。在mouseleave中，我只把$（'。single-img'）。removeClass（'hover'）; –

好东西......很高兴帮助。 – rasmeister

尝试$("h4").prev("div.single-img")

来源

2017-03-09 01:48:12 Larpee

您可以使用jQuery的.index()找出父元素下的每个元素的位置，然后减去其索引找到他们两个人之间的距离。当您取绝对值Math.abs(...)时，它会忽略负号（因此无论它是在目标元素之前还是之后都没关系）。

然后只需排序并返回距离最短的元素。请看下面的例子：

var findNearestSib = function(element){ 
 
    var t = $(element); 
 
    var ind = t.index(); 
 
    var sibs = t.siblings('div.single-img'); // Filter out target siblings 
 
    
 
    var closest = sibs.map(function(i,e){ 
 
     var cur = $(e).index(); // Index of current element 
 
     return { 
 
      dist: Math.abs(cur - ind), // Distance between sibling and h4 
 
      elem: e 
 
     }; 
 
    }).toArray().sort(function(a,b){ 
 
     return a.dist - b.dist; // Sort by shortest distance 
 
    }); 
 
    
 
    if(closest.length){ 
 
     return closest[0].elem; // Return nearest element 
 
    } 
 
} 
 
$("h4").mouseenter(function() { 
 
    $(findNearestSib(this)).addClass('hover'); 
 
}).mouseleave(function() { 
 
    $(findNearestSib(this)).removeClass('hover'); 
 
});

div.single-img { 
 
    background-color:blue; 
 
    height:12px; 
 
    border:2px solid white; 
 
} 
 
div.single-img.hover { 
 
    background-color:green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="parent-div"> 
 
    <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> 
 
</div>

来源

2017-03-09 02:34:36 Pluto

jQuery的查找最接近元素

回答

相关问题