Quando a função Clone do jQuery é útil?

Um dos desafios de aprender uma biblioteca (seja a biblioteca padrão de funções que vem com uma linguagem de programação ou um projeto de terceiros) é duplo:

1. aprender as funções que estão disponíveis,
2. aprendendo a usar essas funções.

E, realmente, às vezes até mesmo aprender a usar essas funções não é tão difícil – é saber quando usar uma determinada função para ajudar a minimizar o código enquanto ainda atinge os objetivos do projeto.

Função Clone do jQuery

Um exemplo que vem à mente é o uso da função clone do jQuery. A definição da função é simples:

O método .clone() executa uma cópia profunda do conjunto de elementos correspondentes, o que significa que ele copia os elementos correspondentes, bem como todos os seus elementos descendentes e nós de texto.

O bom da função é que ela também pode criar uma cópia "superficial" da função. Isso significa que você pode copiar os elementos sem os manipuladores de eventos, elementos filhos e assim por diante.

Dependendo de suas necessidades, um vai ser mais valioso que o outro. Mas, para este post, suponha que uma cópia profunda é o que estamos procurando.

1 Um Caso de Uso Potencial

Digamos que você tenha um conjunto de imagens em uma página e para cada uma dessas imagens, você precisa adicionar algum manipulador de eventos para que quando a imagem for clicada algo aconteça.

• talvez uma caixa de diálogo modal apareça,
• talvez algo seja enviado ao servidor por meio de uma solicitação assíncrona,
• talvez a apresentação da página precise mudar,
• etc.

Não sei. Seja qual for o seu caso, digamos que você tenha uma imagem ou um conjunto de imagens e precise exibir uma caixa de diálogo modal quando for clicada.

2 Configurando o Código

Para fazer isso, há várias coisas que precisamos fazer:

1. adicione um atributo personalizado às imagens para que possamos anexar manipuladores de eventos adequados,
2. configurar uma parcial que tenha a marcação que queremos exibir com um determinado pedaço de HTML,
3. usando clone para aproveitar a parcial que escrevemos e duplicamos, conforme necessário.

Passo 1

Se você estiver trabalhando com o WordPress e procurando como adicionar atributos de imagem personalizados, você pode ver um tutorial de como fazer isso neste post.

Passo 2

Criar uma parcial é simples. O código pode ser tão simples quanto o seguinte trecho :

<p class="acme-element">
    <span>Acme</span>
</p><!--- .acme-element -->

E sim, você pode vestir um pouco de CSS e adicionar algum código personalizado a um dos elementos usando PHP, mas isso cobre o básico absoluto.

etapa 3

Agora digamos que para cada imagem que existe na página (com um atributo personalizado como data-type="acme” ), queremos anexar uma cópia do elemento acima à página relacionada a cada uma das imagens na página.

Para isso, precisamos saber:

1. quando um elemento é clicado,
2. é o elemento pai,
3. e como anexar o elemento usando o  método clone.

Então, primeiro, queremos detectar quando uma determinada imagem é clicada. Para fazer isso, podemos percorrer todas as imagens na página para que possamos anexar um manipulador de eventos personalizado:

// Loop through each of the image with the custom data-types on the page.
$('img[data-type="acme"]').each(function() {

  // ...

});

Então, quando a imagem é clicada, encontramos o elemento pai da imagem que foi clicada (e então a maior parte do trabalho acontece).

Ou seja, pegamos uma cópia do elemento anterior no post, clonamos e anexamos ao container:

var $this, $parent, $clone;

// Loop through each of the image with the custom data-types on the page.
$('img[data-type="acme"]').each(function() {

  $this = $(this);
  $(this).on('click', function() {

    // Reference the parent of the image that was clicked and clone the element.
    $parent = $this.parent();
    $clone  = $('.acme-element').clone(true);

    // Next, append the cloned element to the parent.
    $parent.append($clone);

  });
});

E então podemos trabalhar com cada um de forma independente.

Algumas pegadinhas

Ao clonar elementos, há algumas coisas que você precisa lembrar (que são mencionadas acima). Especificamente:

• lembre-se de que você pode precisar de elementos clonados de maneira diferente, dependendo do manipulador de eventos,
• pode ser necessário criar IDs personalizados para um determinado elemento antes de anexá-lo à página,
• talvez um elemento precise ser alternado quando algo for clicado,
• e assim por diante.

Existem várias maneiras de lidar com um elemento clonado, mas sempre que você fizer isso, certifique-se de que, ao clonar um elemento, esteja identificando e gerenciando eventos adequadamente, para não obter resultados erráticos.