javascript - 使用 javascript 从具有相同类的元素克隆内容

Question

我对 JavaScript 的了解很少，并且负责将一个 DIV 中的 H2 和 P 复制到悬停时显示的另一个 DIV 中。请看看我在这里想做什么:http://dev.surgeryatnmc.org/surgical-services/ 。

我正在尝试从 .orig 克隆到 .hover，它有点工作，但在每个工具提示中显示所有三个实时项目，而不是单独显示。

这是我的列表项:

<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>

这是我的脚本:

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

我也尝试过这个，但它只克隆第一个项目:

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

感谢大家的帮助，谢谢大家!

您的所有答案都有效，我没有意识到这个问题可以有这么多解决方案。非常感谢您的帮助!

Answer 1

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