jQuery.after()関数の詳しい説明

after() 関数は、一致する各要素の後に指定されたコンテンツを挿入するために使用されます。

指定できる内容は、htmlstring、DOM要素(または配列)、jQueryオブジェクト、関数(戻り値)です。

この関数の反対は before() 関数で、一致する各要素の前に指定されたコンテンツを挿入するために使用されます。

この関数はjQueryオブジェクト(インスタンス)に属します。

構文

jQueryObject.after( content1 [, content2 [, contentN ]] )

パラメータ

パラメータの説明

content1 String/Element/jQuery/Functionタイプで指定された追加コンテンツ。

content2 Optional/String/Element/jQuery型で指定された追加コンテンツ。

contentN オプション/文字列/要素/jQuery タイプで指定された追加コンテンツ。任意の数があります。

after() は、複数のパラメーターで表されるすべてのコンテンツを、一致する各要素の直後の位置に挿入できます。パラメータの型が文字列の場合、HTML 文字列として扱われます。

jQuery 1.4 の新しいサポート: パラメーター content1 は関数にすることができます。 after() は、一致するすべての要素に基づいて関数を走査して実行します。関数内の this は、対応する DOM 要素を指します。

after() は 2 つのパラメーターも関数に渡します。最初のパラメーターは一致する要素内の現在の要素のインデックスで、2 番目のパラメーターは要素の現在の内部 HTML コンテンツ (innerHTML) です。 関数の戻り値は、挿入する必要があるコンテンツです(HTML文字列、DOM要素、またはjQueryオブジェクトの可能性があります)。

注: 最初のパラメーターのみをカスタム関数にすることができ、トラバーサルの実行に使用されます。後続のパラメータも関数である場合、その toString() メソッドが呼び出され、文字列に変換され、HTML コンテンツとして扱われます。

戻り値

after() 関数の戻り値は jQuery 型で、現在の jQuery オブジェクト自体を返します (チェーン スタイルのプログラミングを容易にするため)。

注: 挿入されたコンテンツが現在のページの一部の要素である場合、これらの要素は元の位置から消えます。つまり、これはコピー操作ではなく、移動操作になります。

例と説明

after() 関数は、一致する各要素の後にコンテンツを挿入するために使用されます:

<p>段落文本1<span></span></p><!--插入到p元素之后的位置-->
<p>段落文本2<span></span></p><!--插入到p元素之后的位置-->
<script type="text/javascript">
$("p").after( &#39;<!--插入到p元素之后的位置-->&#39; ); 
</script>

after() 関数と insertAfter() 関数の違いに注意してください:

var $A = $("s1");
var $B = $("s2");
// 将$B插入到$A之后
$A.after( $B ); // 返回$A
// 将$A插入到$B之后
$A.insertAfter( $B ); // 返回表示插入内容的jQuery对象( 匹配所有$B之后插入的$A元素 )

次の HTML コード例:

<p id="n1">
    <span id="n2">span#n2</span>    
</p>
<p id="n3">
    <label id="n4">label#n4</label>
    <i id="n5">i#n5</i>
</p>

次の jQuery サンプル コードは、after() 関数の具体的な使用法を示すために使用されます。

// 在n4之后插入一个自定义的span元素
$("#n4").after(&#39;<span id="n6">span#n6(new)</span>&#39;);
// 在n2之后插入n5
// n5将从原位置上消失
$("#n2").after( document.getElementById("n5") );
// 在每个span元素之后插入自定义的strong元素
$("span").after( function(index, innerHTML){
    return &#39;<strong>strong元素&#39; + (index + 1) + &#39;</strong>&#39;;
} );

after() は、追加の空白文字を追加せずに、指定された要素の終了タグの後にコンテンツを挿入します。コードが実行されます。完全な HTML コードは次のとおりです (形式はまったく調整されていません):

<p id="n1">
    <span id="n2">span#n2</span><strong>strong元素1</strong><i id="n5">i#n5</i>    
</p>
<p id="n3">
    <label id="n4">label#n4</label><span id="n6">span#n6(new)</span><strong>strong元素2</strong>
    
</p>

以上がjQuery.after()関数の詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。