how to select a div within a list in jquery

Question

I'm following a tutorial for a menu bar and I'm having trouble adapting it to use qTip because I cant seem to be able to find a way to select a particular element.

 <div class="leftside">
        <!-- all things in floating left side -->
        <ul id="social">
            <li><a class="rss" href="#"></a>
                <!-- icon -->
                <div id="tiprss" class="tip">
                    <!-- tooltip -->
                    <ul>
                        <li><a href="#">580 Readers</a></li>
                        <li><a href="#"><small>[Subscribe]</small></a></li>
                    </ul>
                </div>
            </li>

I'm trying to fetch the div "tiprss" which I can do by name, but I actually want, for the currently hovered li its child "tip" class... is this doable?

The point is so that I can pass the html in this div tag into qTip as content.

Answer 1

Best way to select that div, on that markup in the scenario you described would possibly be:

$(this).closest('.tip');

If we assume that we are within an handler of a LI element.

Answer 2

Try: $('li div.tip').text()

Answer 3

jquery has a hover function that handles this nicely

$('.tip').hover(
     function() {
          var tipdiv = $(this);
          // mouse is over!
     },
     function() {
          var tipdiv = $(this);
          // mouse out!
     }
);

Answer 4

You can bind a mouseover event to $('#social li') like so:

$('#social li').bind('mouseover',function(e){
    $('#qTipID').html($(this).find('.tip').html());
});

I assume the qTip disappears on mouseout, so no need to remove anything since it will be replaced on next mouseover. Here's a working example.