Wann ist die Clone-Funktion von jQuery nützlich?

Eine der Herausforderungen beim Erlernen einer Bibliothek (sei es die Standardbibliothek mit Funktionen, die mit einer Programmiersprache oder einem Drittanbieterprojekt geliefert werden) ist zweifach:

1. Erlernen der verfügbaren Funktionen,
2. lernen, wie man diese Funktionen verwendet.

Und wirklich, manchmal ist es gar nicht so schwer zu lernen, wie man diese Funktionen verwendet – es ist zu wissen, wann man eine bestimmte Funktion verwendet, um den Code zu minimieren und gleichzeitig die Ziele des Projekts zu erreichen.

Klonfunktion von jQuery

Ein Beispiel, das mir in den Sinn kommt, ist die Verwendung der Clone – Funktion von jQuery. Die Definition der Funktion ist einfach:

Die Methode .clone() führt eine tiefe Kopie des Satzes übereinstimmender Elemente durch, was bedeutet, dass sie die übereinstimmenden Elemente sowie alle ihre untergeordneten Elemente und Textknoten kopiert.

Das Schöne an der Funktion ist, dass sie auch eine „flache” Kopie der Funktion erstellen kann. Das bedeutet, dass Sie die Elemente ohne die Ereignishandler, untergeordneten Elemente usw. kopieren können.

Abhängig von Ihren Bedürfnissen wird einer wertvoller sein als der andere. Aber gehen Sie für diesen Beitrag davon aus, dass wir nach einer tiefen Kopie suchen.

1 Ein möglicher Anwendungsfall

Nehmen wir an, Sie haben eine Reihe von Bildern auf einer Seite und für jedes dieser Bilder müssen Sie einen Ereignishandler hinzufügen, damit etwas passiert, wenn auf das Bild geklickt wird.

• vielleicht erscheint ein modaler Dialog,
• vielleicht wird etwas über eine asynchrone Anfrage an den Server gesendet,
• vielleicht muss die Darstellung der Seite geändert werden,
• usw.

Ich weiß nicht. Was auch immer Ihr Fall sein mag, sagen wir, Sie haben ein Bild oder eine Reihe von Bildern und Sie müssen einen modalen Dialog anzeigen, wenn darauf geklickt wird.

2 Einrichten des Codes

Dazu müssen wir mehrere Dinge tun:

1. Fügen Sie den Bildern ein benutzerdefiniertes Attribut hinzu, damit wir die richtigen Ereignishandler anhängen können.
2. Richten Sie einen Teil ein, der das Markup enthält, das wir mit einem bestimmten HTML-Teil anzeigen möchten.
3. Verwenden von Klonen, um den Teil zu nutzen, den wir geschrieben und nach Bedarf dupliziert haben.

Schritt 1

Wenn Sie mit WordPress arbeiten und suchen, wie Sie benutzerdefinierte Bildattribute hinzufügen können, finden Sie in diesem Beitrag ein Tutorial dazu .

Schritt 2

Das Erstellen eines Partials ist einfach. Der Code könnte so einfach wie das folgende Snippet sein :

Und ja, Sie könnten es mit ein bisschen CSS aufpeppen und einem der Elemente mit PHP benutzerdefinierten Code hinzufügen, aber das deckt die absoluten Grundlagen ab.

Schritt 3

Nehmen wir nun an, dass wir für jedes Bild, das auf der Seite vorhanden ist (mit einem benutzerdefinierten Attribut wie data-type="acme” ), eine Kopie des obigen Elements an die Seite anhängen möchten, die sich auf jedes der Bilder auf der Seite bezieht.

Dazu müssen wir wissen:

1. wenn ein Element angeklickt wird,
2. Es ist das übergeordnete Element,
3. und wie man das Element mit der Klonmethode anhängt.

Zuerst wollen wir also erkennen, wann auf ein bestimmtes Bild geklickt wird. Dazu können wir alle Bilder auf der Seite durchlaufen, damit wir einen benutzerdefinierten Ereignishandler anhängen können:

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

  // ...

});

Wenn dann auf das Bild geklickt wird, finden wir das übergeordnete Element des Bildes, auf das geklickt wurde (und dann passiert der Großteil der Arbeit ).

Das heißt, wir nehmen eine Kopie des Elements weiter oben im Beitrag, klonen es und hängen es an den Container an:

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

  });
});

Und dann können wir mit jedem unabhängig arbeiten.

Ein paar Fallstricke

Beim Klonen von Elementen müssen Sie einige Dinge beachten (die oben erwähnt wurden). Speziell:

• Denken Sie daran, dass Sie Klonelemente je nach Ereignishandler möglicherweise unterschiedlich benötigen.
• Möglicherweise müssen Sie benutzerdefinierte IDs für ein bestimmtes Element erstellen, bevor Sie es an die Seite anhängen.
• vielleicht muss ein Element umgeschaltet werden, wenn etwas angeklickt wird,
• usw.

Es gibt zahlreiche Möglichkeiten, mit einem geklonten Element umzugehen, aber wenn Sie dies tun, stellen Sie sicher, dass Sie beim Klonen eines Elements Ereignisse richtig identifizieren und verwalten, damit Sie keine unberechenbaren Ergebnisse erhalten.