使用/ javascript表单元素克隆内容

时间:2012-05-03 15:03:17

标签: javascript jquery clone code-duplication

我的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());

感谢任何帮助,谢谢大家!

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

4 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:0)

尝试这样的事情

编辑: 实际上你必须这样做以获得元素

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

答案 2 :(得分:0)

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

FIDDLE

答案 3 :(得分:0)

另一种解决方案 - &gt;

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