jQuery_jqueryにおけるDOMツリー操作に逆挿入法を使用した解析例

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

逆挿入方法を使用します

ここでは、まず作成したコンテンツを要素の前に挿入し、次に同じ要素をドキュメント内の別の位置に挿入します。一般に、jQuery で要素を操作する場合は、連結メソッドを使用する方が簡潔で効率的です。しかし、これは .insertBefore() のターゲットであり .appendTo() のコンテンツであるため、今これを行う方法はありません。このとき、逆挿入方法を使用すると問題を解決できます。

.insertBefore() や .appendTo() などの挿入メソッドには、通常、対応するリバース メソッドがあります。リバースメソッドも同様の操作を行いますが、「対象」と「内容」が逆になります。例:

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

$('

Hello

')。 appendTo(' #container');

結果は次のコードと同じになります:

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

$('#container').append('

こんにちは');

以下では、.insertBefore() の代わりに .before() を使用してコードを再構築します。次のコードを参照してください。

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

$(document).ready(function() {
var $notes = $('

')
.insertBefore('#footer');
$('span.footnote').each(function(index) {
$(これ)
.before('^{' (インデックス 1) '}')
.appendTo($notes)
.wrap('

');
});
});

メソッドコールバックの挿入

逆挿入メソッドは、.attr() メソッドや .css() メソッドと同様に、関数をパラメータとして受け入れることができます。 渡された関数はターゲット要素ごとに呼び出され、挿入された HTML 文字列を返します。この手法は実際にここでも使用できますが、脚注ごとに同じ操作を繰り返す必要があるため、 .each() メソッドを使用する方が明確です。

ここで、最後のステップを検討します。テキスト内の対応する位置に一致する脚注へのリンクと、テキスト内の位置への脚注内のリンクを作成します。これを行うには、各脚注に 4 つのタグ (テキスト内に 1 つと脚注内に 1 つ) の 2 つのリンクと 2 つの id 属性が必要です。このようにすると、.before()メソッドに渡すパラメータが複雑になるため、ここで文字列を作成する新しい方法を使用する必要があります。
上記のコードでは、演算子を使用して文字列を連結しています。演算子を使用しても問題ありませんが、
連結する文字列が多すぎると、見た目が乱雑になります。したがって、ここでは配列の .join() メソッドを使用して、より大きな配列を構築します。つまり、次の 2 行のコードは同じ結果になります。

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

var str = 'a' 'b' 'c';
var str = ['a', 'b', 'c'].join('');

この例ではさらに多くの文字を入力する必要がありますが、.join() メソッドを使用すると、結合する文字列が多すぎることによる混乱を避けることができます。もう一度サンプルコードを見てみましょう。次のコードは、.join() を使用して文字列を作成する処理です。

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

$(document).ready(function() {
var $notes = $('

') .insertBefore('#footer'); $('span.footnote').each(function(index) { $ (これ)
.before([
'^{'、インデックス 1、
'}'
].join(''))
.appendTo($notes)
.wrap('

');
});
});

では、配列の各要素が個別に演算を実行するため、インデックス 1 を括弧で囲む必要がないことに注意してください。 この手法を使用すると、ページの下部にリンクを追加し、フッター タグに一意の ID 値を追加できます。同時に、次のメソッドでは、リンクに一致するターゲットがあるように、対応する id 属性も
要素に追加する必要があります。

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

$(document).ready(function() {
var $notes = $('

') .insertBefore('#footer'); $('span.footnote').each(function(index) { $ (これ)
.before([
' '"クラス="コンテキスト">',
'^{'、インデックス 1、
'}'
].join(''))
.appendTo($notes)
.wrap('

');
});
});

これらのタグを追加すると、各脚注タグのページ下部に対応する脚注へのリンクが表示されます。残っているのは、脚注にそのコンテキストへのリンクを作成することだけです。これを行うには、.appendTo() の逆メソッドである .append() を使用できます。次のコードを参照してください。

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

$(document).ready(function() {

var $notes = $('

''id="context-'、インデックス 1、
'"クラス = "context__>',
'^{'、インデックス 1、
'}'
].join(''))
.appendTo($notes)
.append([
' (');
});
});

ここでの href は脚注タグ内の ID を指していることに注意してください。実行結果には、新しいリンクを含む脚注が表示されます。

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