找到最接近的元素與給定類的JQuery

Question

我有這個HTML：

<div class="field select"> 
    <div class="FormToolTipContainer"> 
     <h2>Details</h2> 
     <div class="FormToolTip">&#63;             
     </div> 
    </div> 
</div>          
<div class="FormToolTipText"><strong>Tool tip:</strong> Add details here</div> 

然後，我有這樣的：

$(function() { 
    $(".FormToolTip").hover(function() { 
     var ToolTipDiv = $(this).closest('.FormToolTipText'); 

     ToolTipDiv.toggle(); 

     var ToolTipOffset = $('.FormToolTip').offset(); 
     ToolTipOffset.top = ToolTipOffset.top + 40; 
     ToolTipDiv.css(ToolTipOffset); 

    }, function() { 
     var ToolTipDiv = $(this).find(':first-child'); 
     ToolTipDiv.toggle(); 
    }); 
}); 

當我試圖通過this使用closest選擇找到元素FormToolTipText但它不起作用。

我也試過next但這不起作用。

是因爲該元素FormToolTipText超出FormToolTip

至於我可以看到我在這裏按照這些指示： https://api.jquery.com/next/ https://api.jquery.com/closest/

和衆多的SO問題，但沒有人會選擇元素我試過了。

正如我所說的，我嘗試過所有我能想到的變化，以及我能找到的所有變化，但沒有一個能起作用。

基本上我想做一個提示，並需要導航到最接近的分度類FormToolTipText，但只能在關係這樣做this

任何想法？

Answer 1

.FormToolTipText不是.FormToolTip的母公司。所以你根本無法得到它。你需要做的是，用.closest()得到家長和使用.next()穿越到.FormToolTipText：

var ToolTipDiv = $(this).closest('.field').next('.FormToolTipText'); 

Answer 2

closest()只着眼於父元素，而你需要去兩個層次然後找到下一個元素。

另請注意，您對css()的使用也不正確 - 您需要指定要修改的CSS屬性。試試這個：

$(".FormToolTip").hover(function() { 
    var $tooltipDiv = $(this).closest('.field').next('.FormToolTipText').toggle(); 
    var toolipOffset = $(this).offset(); 
    $tooltipDiv.css('top', toolipOffset.top + 40); // this is a guess, amend as needed 
}, function() { 
    var $tooltipDiv = $(this).find(':first-child'); 
    $tooltipDiv.toggle(); 
});