Question

How can I target the element that only exists next to my target element. For example…

HTML

<a class="toolTips">sdas</a><div class="toolTip">Yay</div>

I have these littered all over my html.

Jquery

$('.toolTips').mouseover(function() {
     $(this).next('.toolTip').fadeIn('100');
});

But this targets all the elements that exist after .toolTips, I only want to target the one that exists right after .toolTips?

Answer 1

As per jQuery documentation, next should only return one element. So you’re most likely not providing us the actual code that you’re using.

If you’d present an example in JSFiddle to show us the issue it would be easier for us to pinpoint the problem.

but whenever you have a jQuery set of elements you can always reduce to a single one by using eq function:

$('.toolTips').mouseover(function() {
    $(this).next('.toolTip').eq(0).fadeIn('100');
});

or use different selector

$('.toolTips').mouseover(function() {
    $(this).next('.toolTip:first').fadeIn('100');
});

Script-less solution that uses CSS

You can as well use a script-less solution that uses just CSS styling and if CSS3 is supported also does animated fading:

.toolTip {        
    opacity: 0;
    filter: alpha(opacity=0);
    position: absolute;
    display: inline-block;
    border: 1px solid #ccc;
    background-color: #eee;
    margin-left: 5px;
    padding: 2px 5px;
    /* CSS3 transitions */
    transition: all .5s;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
}
a.toolTips:hover + .toolTip {
    opacity: 1;
    filter: alpha(opacity=100);
}​

This is of course a solution for newer browsers, because CSS transitions aren’t supported by older versions (or IE that is as well). But those that don’t support transitions, will nicely just show and hide these tips without animation. Even IE should work nicely.