CODEWITHSUNDEEP
jquery
Alex
Alex

Reputation: 3998

Find closest element with given class JQuery

I have this 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>

Then I have this:

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

Where I am trying to find the element FormToolTipText by using the closest selector on this but it is not work.

I have also tried next but that does not work.

Is it because the element FormToolTipText is outside FormToolTip

As far as I can see I have followed these instructions here: https://api.jquery.com/next/ https://api.jquery.com/closest/

and numerous SO questions, but none of them will select the element I have tried.

As I said, I have tried every variation I can think of, and everything I can find but none of them work.

Basically I am trying to make a tooltip and need to navigate to the closest div with the class FormToolTipText but can only do so in relation to this

Any ideas?

Upvotes: 2

Views: 11832

Answers (2)

Rory McCrossan
Rory McCrossan

Reputation: 337713

closest() only looks at parent elements whereas you need to go up two levels then find the next element.

Also note that your use of css() is incorrect too - you need to specify the CSS property you want to amend. Try this:

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

Upvotes: 2

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167250

The .FormToolTipText is not the parent of the .FormToolTip. So you cannot get it at all. What you need to do is, using .closest() get the parent and use .next() to traverse to .FormToolTipText:

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

Upvotes: 4

Related Questions