.
$('div.chapter p:eq(0)'). clone() .insertBefore('div.chapter');
Dengan cara ini, perenggan yang sama akan muncul dua kali. Ia boleh dilihat bahawa hubungan antara .clone() dan kaedah sisipan adalah sama seperti menyalin dan menampal.
Secara lalai, kaedah .clone() tidak menyalin peristiwa yang terikat dalam elemen padanan atau unsur turunannya. Walau bagaimanapun, anda boleh menghantar parameter Boolean kepada kaedah ini Jika anda menetapkan parameter ini kepada benar, anda boleh menyalin acara bersama-sama, iaitu, .clone(true). Dengan cara ini, anda boleh mengelakkan masalah mengikat semula acara secara manual selepas setiap salinan.
Buat petikan tarik melalui salinan Banyak tapak web, seperti rakan cetak mereka, menggunakan petikan tarik untuk menekankan potongan kecil teks dan menarik perhatian pembaca. Petikan yang dipanggil adalah untuk mengekstrak sebahagian daripada teks daripada teks utama dan kemudian menggunakan gaya grafik khas pada teks ini. Kesan hiasan ini boleh dicapai dengan mudah melalui kaedah .clone(). Mula-mula, mari kita lihat perenggan ketiga teks contoh:
.ditarik {
kedudukan: mutlak; lebar: 120px;
fon: condong 1.2em "Times New Roman", Times, latar belakang: #e5e5e5;
bayang kotak: 1px 1px 8px rgba(0, 0, 0, 0.6);
}
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:
$(document).ready(function() {
$('span.pull-quote').each(function(index) { var $parentParagraph = $(this).parent('p'); $parentParagraph.css('position', 'relative');
});
});
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:
$(document).ready(function() {
$('span.pull-quote').each(function(index) { var $parentParagraph = $(this).parent('p'); $parentParagraph.css('position', 'relative'); var $ clonedCopy = $(this).clone();
$clonedCopy
.addClass('pulled')
.prependTo($parentParagraph);
});
});
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.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
