{"id":229573,"date":"2022-11-15T14:51:00","date_gmt":"2022-11-15T11:51:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229573"},"modified":"2022-11-15T15:03:18","modified_gmt":"2022-11-15T12:03:18","slug":"cuando-es-util-la-funcion-de-clonacion-de-jquery","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/cuando-es-util-la-funcion-de-clonacion-de-jquery\/","title":{"rendered":"\u00bfCu\u00e1ndo es \u00fatil la funci\u00f3n de clonaci\u00f3n de jQuery?"},"content":{"rendered":"\n<p>Uno de los desaf\u00edos de aprender una biblioteca (ya sea la biblioteca est\u00e1ndar de funciones que viene con un lenguaje de programaci\u00f3n o un proyecto de terceros) es doble:<\/p>\n<ol>\n<li>aprender las funciones que est\u00e1n disponibles,<\/li>\n<li>aprender a utilizar dichas funciones.<\/li>\n<\/ol>\n<p>Y, realmente, a veces incluso aprender a usar dichas funciones no es tan dif\u00edcil: es saber cu\u00e1ndo usar una funci\u00f3n determinada para ayudar a minimizar el c\u00f3digo y al mismo tiempo lograr los objetivos del proyecto.<\/p>\n<h2>Funci\u00f3n de clonaci\u00f3n de jQuery<\/h2>\n<p><strong>Un ejemplo que me viene a la mente es el uso de la funci\u00f3n de clonaci\u00f3n<\/strong> de jQuery. <a href=\"https:\/\/api.jquery.com\/clone\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">La definici\u00f3n<\/a> de la funci\u00f3n es simple:<\/p>\n<blockquote>\n<p>El m\u00e9todo .clone() realiza una copia profunda del conjunto de elementos coincidentes, lo que significa que copia los elementos coincidentes, as\u00ed como todos sus elementos descendientes y nodos de texto.<\/p>\n<\/blockquote>\n<p>Lo bueno de la funci\u00f3n es que tambi\u00e9n puede crear una copia &quot;superficial&quot; de la funci\u00f3n. Esto significa que puede copiar los elementos sin los controladores de eventos, elementos secundarios, etc.<\/p>\n<p>Dependiendo de sus necesidades, uno ser\u00e1 m\u00e1s valioso que el otro. Pero, para esta publicaci\u00f3n, asuma que lo que buscamos es una copia profunda.<\/p>\n<h3>1 Un caso de uso potencial<\/h3>\n<p>Digamos que tiene un conjunto de im\u00e1genes en una p\u00e1gina y para cada una de esas im\u00e1genes, necesita agregar alg\u00fan controlador de eventos para que cuando se haga clic en la imagen suceda algo.<\/p>\n<ul>\n<li>tal vez aparece un di\u00e1logo modal,<\/li>\n<li>tal vez algo se env\u00eda al servidor a trav\u00e9s de una solicitud as\u00edncrona,<\/li>\n<li>tal vez la presentaci\u00f3n de la p\u00e1gina necesita cambiar,<\/li>\n<li>etc.<\/li>\n<\/ul>\n<p>No s\u00e9. Cualquiera que sea su caso, digamos que tiene una imagen o un conjunto de im\u00e1genes y necesita mostrar un cuadro de di\u00e1logo modal cuando se hace clic en \u00e9l.<\/p>\n<h3>2 Configuraci\u00f3n del c\u00f3digo<\/h3>\n<p>Para hacer esto, hay varias cosas que debemos hacer:<\/p>\n<ol>\n<li>agregue un atributo personalizado a las im\u00e1genes para que podamos adjuntar controladores de eventos adecuados,<\/li>\n<li>configurar un parcial que tenga el marcado que queremos mostrar con una determinada pieza de HTML,<\/li>\n<li>usando <strong>clon<\/strong> para aprovechar el parcial que hemos escrito y duplicado, seg\u00fan sea necesario.<\/li>\n<\/ol>\n<h4>Paso 1<\/h4>\n<p>Si est\u00e1 trabajando con WordPress y est\u00e1 buscando c\u00f3mo agregar atributos de imagen personalizados, puede ver un tutorial sobre c\u00f3mo hacerlo en <a href=\"https:\/\/wordpress.mediadoma.com\/es\/agregar-atributos-de-imagen-de-wordpress-personalizados\/\" title=\"esta publicaci\u00f3n\">esta publicaci\u00f3n<\/a>.<\/p>\n<h4>Paso 2<\/h4>\n<p>Crear un parcial es simple. El c\u00f3digo podr\u00eda ser tan simple como <a href=\"https:\/\/gist.github.com\/tommcfarlin\/cdde5f1f6c63c25d981447e0e5874452#file-00-sample-markup-html\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">el siguiente fragmento<\/a> :<\/p>\n<pre><code>&lt;p class=\"acme-element\"&gt;\n    &lt;span&gt;Acme&lt;\/span&gt;\n&lt;\/p&gt;&lt;!--- .acme-element --&gt;<\/code><\/pre>\n<p>Y s\u00ed, podr\u00eda vestirlo con un poco de CSS y agregar un c\u00f3digo personalizado a uno de los elementos usando PHP, pero esto cubre los conceptos b\u00e1sicos absolutos.<\/p>\n<h4>Paso 3<\/h4>\n<p>Ahora digamos que para cada imagen que existe en la p\u00e1gina (con un atributo personalizado como <strong>data-type=&quot;acme\u00bb<\/strong> ), queremos agregar una copia del elemento anterior a la p\u00e1gina relacionada con cada una de las im\u00e1genes en la p\u00e1gina.<\/p>\n<p>Para ello, necesitamos saber:<\/p>\n<ol>\n<li>cuando se hace clic en un elemento,<\/li>\n<li>es elemento padre,<\/li>\n<li>y c\u00f3mo agregar el elemento usando el m\u00e9todo de <strong>clonaci\u00f3n .<\/strong><\/li>\n<\/ol>\n<p>Entonces, primero, queremos detectar cu\u00e1ndo se hace clic en una imagen determinada. Para hacer esto, podemos <a href=\"https:\/\/gist.github.com\/tommcfarlin\/cdde5f1f6c63c25d981447e0e5874452#file-01-loop-through-images-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">recorrer todas las im\u00e1genes<\/a> en la p\u00e1gina para poder adjuntar un controlador de eventos personalizado:<\/p>\n<pre><code>\/\/ Loop through each of the image with the custom data-types on the page.\n$('img[data-type=\"acme\"]').each(function() {\n\n  \/\/ ...\n\n});<\/code><\/pre>\n<p>Luego, cuando se hace clic en la imagen, encontramos el elemento principal de la imagen en la que se hizo clic (y luego ocurre la <a href=\"https:\/\/gist.github.com\/tommcfarlin\/cdde5f1f6c63c25d981447e0e5874452#file-02-find-parent-elements-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">mayor parte del trabajo ).<\/a><\/p>\n<p>Es decir, tomamos una copia del elemento anterior en la publicaci\u00f3n, lo clonamos y lo agregamos al contenedor:<\/p>\n<pre><code>var $this, $parent, $clone;\n\n\/\/ Loop through each of the image with the custom data-types on the page.\n$('img[data-type=\"acme\"]').each(function() {\n\n  $this = $(this);\n  $(this).on('click', function() {\n\n    \/\/ Reference the parent of the image that was clicked and clone the element.\n    $parent = $this.parent();\n    $clone  = $('.acme-element').clone(true);\n\n    \/\/ Next, append the cloned element to the parent.\n    $parent.append($clone);\n\n  });\n});<\/code><\/pre>\n<p>Y luego podemos trabajar con cada uno de forma independiente.<\/p>\n<h2>Algunas trampas<\/h2>\n<p>Al clonar elementos, hay algunas cosas que debe recordar (que se mencionan anteriormente). Espec\u00edficamente:<\/p>\n<ul>\n<li>recuerde que es posible que necesite clonar elementos de manera diferente seg\u00fan el controlador de eventos,<\/li>\n<li>es posible que deba crear ID personalizados para un elemento determinado antes de agregarlo a la p\u00e1gina,<\/li>\n<li>tal vez un elemento deba alternarse cuando se hace clic en algo,<\/li>\n<li>y as\u00ed.<\/li>\n<\/ul>\n<p>Existen numerosas formas de manejar un elemento clonado, pero cada vez que lo haga, aseg\u00farese de que cuando <strong>clone<\/strong> un elemento, est\u00e9 identificando y administrando correctamente los eventos, para que no obtenga resultados err\u00e1ticos.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fuente de grabaci\u00f3n:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Un ejemplo de caso de uso de cu\u00e1ndo la funci\u00f3n de clonaci\u00f3n de jQuery es \u00fatil y c\u00f3mo se aplica en una situaci\u00f3n del mundo real con im\u00e1genes, contenedores, eventos y m\u00e1s.<\/p>\n","protected":false},"author":1,"featured_media":165590,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[892,716,727,840],"tags":[1172],"class_list":["post-229573","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo","category-desarrollador","category-javascript-2","category-tutoriales","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/229573","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/comments?post=229573"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/229573\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/165590"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=229573"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=229573"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=229573"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}