När är jQuerys klonfunktion användbar?

En av utmaningarna med att lära sig ett bibliotek (vare sig det är standardbiblioteket med funktioner som kommer med ett programmeringsspråk eller ett tredjepartsprojekt) är tvåfaldig:

1. lära sig de funktioner som är tillgängliga,
2. lära sig att använda dessa funktioner.

Och faktiskt, ibland är det inte så svårt att lära sig hur man använder dessa funktioner – det är att veta när man ska använda en viss funktion för att hjälpa till att minimera koden samtidigt som man uppnår projektets mål.

jQuerys klonfunktion

Ett exempel som kommer att tänka på är användningen av jQuerys klonfunktion. Definitionen av funktionen är enkel:

Metoden .clone() utför en djupkopia av uppsättningen av matchade element, vilket innebär att den kopierar de matchade elementen såväl som alla deras underordnade element och textnoder.

Det fina med funktionen är att den även kan skapa en "grund" kopia av funktionen, vilket innebär att du kan kopiera elementen utan händelsehanterare, underordnade element och så vidare.

Beroende på dina behov kommer den ena att vara mer värdefull än den andra. Men för det här inlägget, anta att en djup kopia är vad vi är ute efter.

1 Ett potentiellt användningsfall

Låt oss säga att du har en uppsättning bilder på en sida och för var och en av dessa bilder måste du lägga till någon händelsehanterare så att något händer när bilden klickas.

• kanske en modal dialogruta visas,
• kanske något skickas till servern via en asynkron begäran,
• kanske måste presentationen av sidan ändras,
• etc.

jag vet inte. Oavsett vad ditt fall kan vara, låt oss säga att du har en bild eller en uppsättning bilder och du måste visa en modal dialogruta när den klickas.

2 Ställa in koden

För att göra detta finns det flera saker vi behöver göra:

1. lägg till ett anpassat attribut till bilderna så att vi kan bifoga korrekta händelsehanterare,
2. ställ in en del som har den markering vi vill visa med en viss bit HTML,
3. använda klon för att utnyttja, dra fördel av den del som vi har skrivit och duplicerat den efter behov.

Steg 1

Om du arbetar med WordPress och letar efter hur du lägger till anpassade bildattribut kan du se en handledning för hur du gör det i det här inlägget.

Steg 2

Att skapa en del är enkelt. Koden kan vara så enkel som följande kodavsnitt :

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

Och ja, du kan klä upp det med lite CSS och lägga till lite anpassad kod till ett av elementen med PHP, men detta täcker de absoluta grunderna.

Steg 3

Låt oss nu säga att för varje bild som finns på sidan (med ett anpassat attribut som data-type="acme” ), vill vi lägga till en kopia av ovanstående element på sidan som är relaterad till var och en av bilderna på sidan.

För att göra detta behöver vi veta:

1. när ett element klickas,
2. det är föräldraelementet,
3. och hur man lägger till elementet med klonmetoden.

Så först vill vi upptäcka när en given bild klickas. För att göra detta kan vi gå igenom alla bilder på sidan så att vi kan bifoga en anpassad händelsehanterare:

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

  // ...

});

Sedan, när bilden klickas, hittar vi det överordnade elementet i bilden som klickades på (och sedan sker huvuddelen av arbetet ).

Det vill säga, vi tar en kopia av elementet tidigare i inlägget, klonar det och lägger till det i behållaren:

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

  });
});

Och då kan vi arbeta självständigt med var och en.

Ett par Gotchas

När du klonar element finns det några saker du måste komma ihåg (som nämns ovan). Specifikt:

• kom ihåg att du kan behöva klonelement olika beroende på händelsehanteraren,
• du kan behöva skapa anpassade ID:n för ett visst element innan du lägger till det på sidan,
• kanske ett element måste växlas när något klickas,
• och så vidare.

Det finns många sätt att hantera ett klonat element, men när du gör det, se till att när du klona ett element identifierar och hanterar du händelser på rätt sätt, så att du inte får oberäkneliga resultat.