Question

I have very little JavaScript knowledge and have been tasked with duplicating an H2 and a P from a DIV into another DIV that shows on a hover. Please take a look at what I’m trying to do here: http://dev.surgeryatnmc.org/surgical-services/.

I’m trying to clone from .orig to .hover, and it’s sort of working but showing all three live items in each tooltip instead of individually.

Here are my list items:

<ul>
    <li class="lactrimal1">
                <div class="orig">
                    <h2>Lactrimal Duct Probe</h2>
                    <p>Helps patient regain use of their tear ducts in this quick procedure.</p>
                </div>                    
                <div class="img">
                    <div class="txt hover"></div>
                </div>
            </li>
            <li class="cataracts2">
                <div class="orig">
                    <h2>Cataracts</h2>
                    <p>We replace the eye's natural lens which has become clouded by cataract with an artificial lens.</p>
                </div>
                <div class="img">
                    <div class="txt hover"></div>
                </div>
            </li>
            <li class="sinus3">
                <div class="orig">
                    <h2>Endoscopic Sinus Surgery</h2>
                    <p>A procedure used to remove blockages in the sinuses to allow for efficient pain-free breathing.</p>
                </div>
                <div class="img">
                    <div class="txt hover"></div>
                </div>
            </li>
</ul>

Here’s my script:

$('div.orig', this).each(function() {
    $(this).clone().appendTo('div.hover');
});

I’ve also tried this but it only clones the first item:

$(".hover").html($('.orig').html());

Any help is appreciated, thanks everyone!

All of your answers worked, I didn’t realize there could be so many solutions to the issue. thanks a ton for the help!

Answer 1

$('div.orig').each(function() {
    $(this).parent().find('.txt').html( $(this).html() );
});