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

【问题标题】：Clone content w/javascript from elements with same class从具有相同类的元素中使用 javascript 克隆内容
【发布时间】：2012-05-03 15:03:16
【问题描述】：

我的 JavaScript 知识很少，我的任务是将 H2 和 P 从 DIV 复制到另一个悬停时显示的 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());

感谢大家的帮助，谢谢！

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

【问题讨论】：

标签： javascript jquery clone code-duplication

【解决方案1】：

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

【讨论】：

【解决方案2】：

$('.orig', this).each(function() {
    $(this).next('.img').children('.hover').html($(this).html());
});

FIDDLE

【讨论】：

谢谢adeno！ Fiddle 网站也很棒

【解决方案3】：

试试这样的

编辑：实际上你必须这样做才能到达元素

$('div.orig').each(function() {
    var jThis = $(this);
    jThis.parent().find('.hover').html(jThis.html());
});

【讨论】：

【解决方案4】：

另一种解决方案->

$(document).ready(function(){
$('div.orig', this).each(function(i,e) {
    $(this).clone().appendTo('div.hover:eq(' + i + ')');
});
})

【讨论】：