Question

I am solving following problem – I have on my page statement of items from DB table and every this item is printed to div. If the user move cursor of mouse on this div, so then will be show div with other information.

            <div class="dost">
                3 days | 
                <span>deliv</span>
                <div class="deliv_bubble">
                  <div><strong>aaa</strong></div>
                                      <div><strong>bbb</strong></div>
                                      <div><strong>ccc</strong></div>
                </div>
            </div>

$('div.dost span').mouseover(function() {
    $('div.dost div.deliv_bubble').show(); 
});

On the page is e.g. 100 times printed this html structure. My problem is, that when I move the mouse cursor on the text deliv, so the div deliv_bubble will be showed, but unfortunately 100 times… I am trying to display this just one time…

Can anyone help me, please, what I am doing wrong?
Thank you

Answer 1

Do this:

$('div.dost span').mouseover(function() {
    $(this).parent().find('div.deliv_bubble').show(); 
});

$(this).parent() will return the corresponding parent div.dost

Hope this helps. Cheers