Clonar contenido con javascript de elementos con la misma clase

Tengo muy poco conocimiento de JavaScript y me han encargado duplicar un H2 y una P de un DIV en otro DIV que se muestra al pasar el mouse sobre él. Por favor, eche un vistazo a lo que estoy tratando de hacer aquí: http://dev.surgeryatnmc.org/surgical-services/.

Estoy tratando de clonar de .orig a .hover, y funciona, pero muestra los tres elementos en vivo en cada información sobre herramientas en lugar de individualmente.

Aquí están mis elementos de la lista:

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

Aquí está mi guión:

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

También probé esto, pero solo clona el primer elemento:

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

Cualquier ayuda es apreciada, gracias a todos!

Todas sus respuestas funcionaron, no me di cuenta de que podría haber tantas soluciones al problema. ¡Muchas gracias por la ayuda!

preguntado el 03 de mayo de 12 a las 16:05

4 Respuestas

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

contestado el 03 de mayo de 12 a las 16:05

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

VIOLÍN

contestado el 03 de mayo de 12 a las 16:05

Gracias adeneo! Ese sitio de Fiddle también es genial: BRD

Prueba algo como esto

EDITAR: En realidad, tienes que hacer lo mismo para llegar al elemento.

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

contestado el 03 de mayo de 12 a las 16:05

otra solución->

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

contestado el 03 de mayo de 12 a las 16:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.