Bagaimana untuk menyalin elemen dalam operasi pokok DOM dalam jQuery_jquery

Dadurch werden dem Pull-Zitat ein hellgrauer Hintergrund, etwas Abstand und eine andere Schriftart hinzugefügt. Noch wichtiger ist, dass es absolut 20 Pixel über und 20 Pixel rechts vom nächsten Vorfahrenelement positioniert ist, das (absolut oder relativ) im DOM positioniert ist. Wenn es im Vorgängerelement keine Elemente gibt, für die eine Positionierung gilt (außer statisch), wird das Pull-Quote relativ zum -Element positioniert. Stellen Sie dazu sicher, dass in Ihrem jQuery-Code auf das übergeordnete Element des kopierten Pull-Quotes der Stil „position:relative“ angewendet wird.

CSS-Position berechnen

Obwohl die Position des oberen Rands des Pull-Quote-Felds relativ intuitiv ist, ist es möglicherweise nicht so leicht zu verstehen, wenn die linke Seite 20 Pixel rechts vom positionierten übergeordneten Element liegt. Um diese Zahl zu erhalten, müssen Sie zunächst die Gesamtbreite des Pull-Quote-Felds berechnen. Dies ist der Wert des Breitenattributs plus der linken und rechten Auffüllung oder 145 Pixel 5 Pixel 10 Pixel. Das Ergebnis ist 160 Pixel. Wenn Sie das richtige Attribut für ein Pull-Quote festlegen, richtet ein Wert von 0 die rechte Seite des Pull-Quotes an der rechten Seite seines übergeordneten Elements aus. Um seine linke Seite 20 Pixel nach rechts vom übergeordneten Element zu verschieben, muss es daher um 20 Pixel mehr als seine Gesamtbreite, die -180 Pixel beträgt, in die entgegengesetzte Richtung verschoben werden.

Jetzt kehren wir zum jQuery-Code zurück und sehen uns an, wie man Stile anwendet. Beginnen Sie zunächst mit einem Selektorausdruck, der allen -Elementen entspricht, und wenden Sie dann den position:relative-Stil auf die ausgewählten Elemente an, siehe folgenden Code:

Hier speichern wir auch den Selektorausdruck, der mehrmals in der Variablen $parentParagraph verwendet werden muss, um die Leistung und Lesbarkeit zu verbessern.

Der nächste Schritt besteht darin, das Highlight-Zitat selbst zu erstellen, um die vorbereiteten CSS-Stile zu nutzen. Zu diesem Zeitpunkt kopieren wir zunächst jedes -Element, fügen dann die gezogene Klasse zur erhaltenen Kopie hinzu und fügen diese Kopie schließlich am Anfang des übergeordneten Absatzes ein, siehe folgenden Code:

Hier definieren wir eine neue Variable $clonedCopy für die spätere Verwendung.
Da für das kopierte Element eine absolute Positionierung festgelegt wurde, spielt seine Position innerhalb des Absatzes keine Rolle. Gemäß den Einstellungen in den CSS-Regeln wird es, solange es sich innerhalb des Absatzes befindet, relativ zur oberen und rechten Seite des Absatzes positioniert. Derzeit sehen Absätze mit eingefügten hervorgehobenen Zitaten so aus:

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.