jQuery / .clone()

Bienvenidos sean a este post, hoy continuaremos con las manipulaciones de codigo.

En este post vimos como manipular los atributos, en este post vimos como manipular las propiedades, y en este post vimos como insertar elementos nuevos, moverlos y envolverlos, pero en algunas ocasiones necesitaremos poder copiarlos en lugar de moverlos, vamos a suponer el caso de que el menu que se encuentra en la parte superior de la pagina o header se visualice en la parte baja o footer pero en lugar de programar dos veces el mismo bloque de codigo, gracias a jQuery tenemos disponible un metodo que nos hara una copia exacta del bloque y podremos reutilizarlo donde necesitemos, este metodo es clone, para utilizarla debemos hacerlo de la siguiente manera:

$('elemento').clone();

Esto simplemente lo copiara, pero si queremos a su vez ubicar esta copia en un lugar podemos hacer lo siguiente:

$('elemento').clone().insertBefore('elemento');

Despues de copiado simplemente le especificamos donde lo vamos a copiar, para entender el concepto y ver otras cuestiones en accion vamos a tomar el codigo que trabajamos en el codigo en el post anterior, en caso de no tenerlo les dejo un link para descargarlo:

Simplemente extraigan los archivos en un directorio para poder comenzar a trabajar, con esto realizado vamos al archivo codigo.js y agregaremos este bloque de codigo:

$(document).ready(function() {
	$('div.capitulo p:eq(1)').clone().insertAfter('div.capitulo');
});

En este caso vamos a seleccionar al segundo parrafo del div capitulo, lo copiaremos y lo insertaremos despues del div capitulo pero ira antes de footer, si vamos a nuestra pagina se vera de la siguiente forma

Observen como el segundo parrafo se copio integro tal como le pedimos y como esto lo hacemos despues de insertar el elemento para ir al inicio no lo tiene asignado, pero ahora vamos a trabajar con algo un poco mas concreto, para ello primero debemos ir al archivo libro.html donde modificaremos el siguiente parrafo:

<p>Durante el invierno de 1927-28, los agentes del Gobierno Federal realizaron una extraña y secreta investigación sobre ciertas instalaciones del antiguo puerto marítimo de Innsmouth, en <a href="https://www.mass.gov/">Massachusetts</a>. El público se enteró de ello en febrero, porque fue entonces cuando se llevaron a cabo redadas y numerosos arrestos, seguidos del incendio y la voladura sistemáticos -efectuados con las precauciones convenientes- de una gran cantidad de casas ruinosas, carcomidas, supuestamente deshabitadas, que se alzaban a lo largo del abandonado barrio del muelle. Las personas poco curiosas no prestarían atención a este suceso, y lo consideraron sin duda como un episodio más de la larga lucha contra el licor.</p>

De la siguiente manera:

<p><span class="extracto-ejemplo">Durante el invierno de 1927-28, los agentes del Gobierno Federal realizaron una extraña y secreta investigación sobre ciertas instalaciones del antiguo puerto marítimo de Innsmouth</span>, en <a href="https://www.mass.gov/">Massachusetts</a>. El público se enteró de ello en febrero, porque fue entonces cuando se llevaron a cabo redadas y numerosos arrestos, seguidos del incendio y la voladura sistemáticos -efectuados con las precauciones convenientes- de una gran cantidad de casas ruinosas, carcomidas, supuestamente deshabitadas, que se alzaban a lo largo del abandonado barrio del muelle. Las personas poco curiosas no prestarían atención a este suceso, y lo consideraron sin duda como un episodio más de la larga lucha contra el licor.</p>

Observen que lo unico que hicimos fue agregar un span denominado extracto-ejemplo el cual es solo una parte del parrafo pero ya veremos para que, con esto realizado debemos ir al archivo estilo.css y le agregarermos el siguiente segmento de codigo:

.capitulo {
  margin-right: 200px;
}

#titulo {
  font-size: 1.5em;
}

.extracto {
  position: absolute:
  width: 120px;
  top: -20px;
  right: -180px;
  padding: 20px;
  font: italic 1.2 em "Times New Roman", Times, serif;
  background: #e5e5e5;
  border: 1px solid ##999;
  border-radius: 8px;
  box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.6);
}

Agregaremos primero la clase relacionada a capitulo, en este caso le estableceremos el margen derecho, despues aplicaremos un estilo al titulo de la pagina, no es necesario pero ya que estamos 😅, despues agregaremos una nueva clase que utilizaremos para mostrar el contenido del span que agregamos anteriormente, simplemente copienlo en su archivo son solamente parametros para darle un mejor estilo, ahora vamos a pasar a la magia verdadera, para ello volveremos al archivo codigo.js y modificaremos el bloque que agregamos de la siguiente manera:

$(document).ready(function() {
	$('span.extracto-ejemplo').each(function(index) {
		var $parienteParrafo = $(this).parent('p');
		$parienteParrafo.css('position','relative');
		var $copia = $(this).clone();
		$copia
			.addClass('extracto')
			.prependTo($parienteParrafo);
	});
});

Lo primero que haremos sera seleccionar al span que identificamos como extracto-ejemplo, a este le aplicamos la funcion each (en caso de haber mas ejecutara la funcion que le asignemos), aqui guardamos el indice del elemento aplicado, aunque no lo usemos lo tenemos, nuestro siguiente paso sera definir una variable la cual nos enlazara con el parrafo padre del elemento actual, y a esta variable/objeto le aplicaremos el metodo css para modificar la propiedad position de absolute a relative, despues definimos una variable donde guardaremos una copia del span, por ultimo tomaremos este objeto y le aplicaremos la clase que agregamos (extracto) y despues por medio de prependTo lo ubicaremos dentro de este parrafo pero antes del contenido, con todo esto comentado veamos como quedo como nuestra pagina

Ya tenemos un pequeño extracto de ese primer parrafo pero recuerdan que mencionamos al metodo each aplicaria esto a todos los que encuentre con la misma identificacion, vamos a tomar el siguiente parrafo de libro.html:

<p>Las quejas formuladas por numerosas organizaciones liberales fueron acalladas tras largas deliberaciones secretas; los representantes de dichas sociedades efectuaron algunos viajes a ciertos campos y prisiones, y como consecuencia, tales organizaciones perdieron repentinamente todo interés por la cuestión. Más difíciles de disuadir fueron los periodistas; pero finalmente, acabaron por colaborar con el Gobierno. Sélo un periódico -un diario sensacionalista y de escaso prestigio por esta razón- hizo referencia a cierto submarino capaz de grandes inmersiones que torpedeó los abismos de la mar, justo detrás del <a href="https://hplovecraft.fandom.com/es/wiki/Arrecife_del_Diablo">Arrecife del Diablo</a>. Esta información, recogida casualmente en una taberna marinera, parecía un tanto fantástica ya que el arrecife, negro y plano, queda por lo menos a milla y media del puerto de Innsmouth.</p>

Lo modificaremos de la siguiente manera:

<p><span class="extracto-ejemplo">Las quejas formuladas por numerosas organizaciones liberales fueron acalladas tras largas deliberaciones secretas</span>; los representantes de dichas sociedades efectuaron algunos viajes a ciertos campos y prisiones, y como consecuencia, tales organizaciones perdieron repentinamente todo interés por la cuestión. Más difíciles de disuadir fueron los periodistas; pero finalmente, acabaron por colaborar con el Gobierno. Sélo un periódico -un diario sensacionalista y de escaso prestigio por esta razón- hizo referencia a cierto submarino capaz de grandes inmersiones que torpedeó los abismos de la mar, justo detrás del <a href="https://hplovecraft.fandom.com/es/wiki/Arrecife_del_Diablo">Arrecife del Diablo</a>. Esta información, recogida casualmente en una taberna marinera, parecía un tanto fantástica ya que el arrecife, negro y plano, queda por lo menos a milla y media del puerto de Innsmouth.</p>

Simplemente aplicamos un nuevo tag de span con la misma clase que vimos anteriormente, con solo esta modificacion ya tenemos esta nueva extraccion

Y esto lo podemos hacer todas las veces que queramos y de una manera muy simple, antes de terminar les dejo un link con todos los codigos finales que trabajamos en este post:

En resumen, hoy hemos visto como copiar elementos de una pagina mediante el metodo clone, primero de una forma muy simple, despues lo vimos de una forma mas especializada que nos permitia extraer una porcion de cada uno de ellos, espero les haya sido de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.