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!
$('div.orig').each(function() {
$(this).parent().find('.txt').html( $(this).html() );
});