jQuery_jqueryのDOMツリー操作で要素をコピーする方法

この記事の例では、jQuery での DOM ツリー操作で要素をコピーする方法を説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

要素をコピー

前述の操作には、新しく作成した要素の挿入、ドキュメント内のある場所から別の場所への要素の移動、新しい要素で既存の要素をラップすることが含まれます。ただし、要素をコピーする操作が使用されることもあります。たとえば、ページの上部に表示されるナビゲーション メニューをコピーし、そのコピーをフッターに配置できます。実際、要素をコピーすることでページの視覚的な効果を高めることができるときは、コードを再利用する良い機会となります。結局のところ、コードを 1 回書くだけで jQuery にコピーさせることができるのに、なぜコードを 2 回書き直し、エラーの可能性が 2 倍になるのでしょうか?

要素をコピーするときは、jQuery の .clone() メソッドを使用する必要があります。これにより、将来使用するために一致する要素コレクションのコピーを作成できます。以前と同様に、$() を使用して要素を作成する場合、コピーされた要素に挿入メソッドを適用するまで、これらの要素はドキュメントに表示されません。

たとえば、次のコード行は

の最初の段落のコピーを作成します:

コードをコピーします コードは次のとおりです:

$('div.chapter p:eq(0)')。クローン() ;

しかし、単にコピーを作成するだけでは、ページのコンテンツを変更するのに十分ではありません。コピーしたコンテンツを Web ページに表示したい場合は、挿入メソッドを使用して、そのコンテンツを

の前に配置できます。

コードをコピーします コードは次のとおりです:

$('div.chapter p:eq(0)')。 clone() .insertBefore('div.chapter');

このように、同じ段落が 2 回表示されます。 .clone() と挿入メソッドの関係は、コピー＆ペーストと同じであることがわかります。

イベントと一緒にコピー

デフォルトでは、.clone() メソッドは、一致する要素またはその子孫要素にバインドされたイベントをコピーしません。ただし、このメソッドにブール値パラメーターを渡すことはできます。このパラメーターを true に設定すると、イベントを一緒にコピーできます (.clone(true))。こうすることで、コピーのたびにイベントを手動で再バインドする手間を回避できます。

コピーを使用して引用符を作成する 多くの Web サイトは、印刷版の Web サイトと同様に、テキストの小さな部分を強調し、読者の目を引くために引用符を使用します。いわゆる強調引用とは、本文からテキストの一部を抽出し、このテキストに特殊なグラフィック スタイルを適用することです。 この装飾効果は、.clone() メソッドを使用して簡単に実現できます。まず、サンプル テキストの 3 番目の段落を見てみましょう:

男の子供は自分の子供よりももう 1 つの側面を持っているというのが自然の法則ですしたがって、各世代は（原則として）発展と貴族のスケールを一段階上げます。つまり、スクエアの息子はペンタゴンの息子であり、ヘキサゴンの息子です。

この段落は WX 要素で始まり、その中のクラスはコピーできるように準備されていることがわかりました。コピーした * テキストを別の場所に貼り付けるときは、元のテキストと区別できるようにスタイル プロパティを変更する必要もあります。
このスタイルを実装するには、

コードをコピー コードは次のとおりです:

.pulled {
位置: 絶対; 幅: 120 ピクセル; 右: -180 ピクセル;
フォント: イタリック 1.2em "Times New Roman"、タイムズ、セリフ; ボーダー: 1px ソリッド #999;
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.6);
}

これにより、プルクオートに明るい灰色の背景、パディング、および別のフォントが追加されます。さらに重要なのは、DOM 内に (絶対的または相対的に) 配置されている最も近い祖先要素の 20 ピクセル上と 20 ピクセル右に絶対的に配置されていることです。配置が適用される要素が祖先要素内にない場合 (静的以外)、プル引用符はドキュメント内の

要素を基準にして配置されます。これを行うには、jQuery コード内で、コピーされたプルクオートの親要素に、position:relative スタイルが適用されていることを確認します。

CSS の位​​置を計算

プルクォート ボックスの上端の位置は比較的直感的ですが、その左側が、配置された親要素の 20 ピクセル右にある場合、理解するのはそれほど簡単ではないかもしれません。この数値を取得するには、まずプルクオート ボックスの合計幅を計算する必要があります。これは、width 属性の値に左右のパディングを加えたもの、つまり 145px 5px 10px です。結果は 160px になります。プルクオートの right 属性を設定する場合、値 0 を指定すると、プルクォートの右側が親要素の右側に揃えられます。したがって、左側を親要素の 20 ピクセル右に移動するには、合計幅 (-180 ピクセル) よりも 20 ピクセルだけ反対方向に移動する必要があります。

ここで、jQuery コードに戻り、スタイルを適用する方法を見てみましょう。まず、すべての 要素に一致するセレクター式から始めて、選択した要素にposition:relative スタイルを適用します。次のコードを参照してください。

コードをコピー コードは次のとおりです。

$(document).ready(function() {

$('span.pull-quote').each(function(index) { var $parentParagraph = $(this).parent('p'); $parentParagraph.css('position', 'relative');
});
});

ここでは、パフォーマンスと読みやすさを向上させるために、変数 $parentParagraph で複数回使用する必要があるセレクター式も保存します。

次のステップは、準備された CSS スタイルを利用するためにハイライト引用符自体を作成することです。このとき、まず各 要素をコピーし、次に取得したコピーにプルしたクラスを追加し、最後にこのコピーを親段落の先頭に挿入します。次のコードを参照してください。

コードをコピー コードは次のとおりです。$(document).ready(function() {

$('span.pull-quote').each(function(index) { var $parentParagraph = $(this).parent('p'); $parentParagraph.css('position', 'relative'); var $ clonedCopy = $(this).clone();

$clonedCopy
.addClass('プル')
.prependTo($parentParagraph);
});
});

ここでは、後で使用するために新しい変数 $clonedCopy を定義します。 コピーされた要素には絶対位置が設定されているため、段落内での位置は関係ありません。 CSS ルールの設定に従って、段落内にある限り、段落の上端と右側を基準にして配置されます。 現在、強調表示された引用符が挿入された段落は次のようになります:

この記事が皆さんの jQuery プログラミングに役立つことを願っています。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

もっと見る

人気の記事

アサシンのクリードシャドウズ：シーシェルリドルソリューション

4週間前 By DDD

Windows11 KB5054979の新しいものと更新の問題を修正する方法

3週間前 By DDD

Atomfallのクレーンコントロールキーカードを見つける場所

4週間前 By DDD

<🎜>：Dead Rails-すべての課題を完了する方法

1 か月前 By DDD

Atomfall Guide：アイテムの場所、クエストガイド、およびヒント

1 か月前 By DDD

もっと見る

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？

7702

15

Java チュートリアル

1640

14

CakePHP チュートリアル

1393

52

Laravel チュートリアル

1287

25

PHP チュートリアル

1230

29

もっと見る