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

replaceWith() 関数は、一致する各要素を指定された要素に置き換えるのに使用されます。

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

構文

この関数は jQuery 1.2 の新しい関数です。

jQueryObject.replaceWith(replacement)

Parameters

パラメータの説明

replacement String/Element/jQuery/置換要素に使用される関数型。

パラメータ置換が文字列の場合、HTML文字列として扱われます。

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

replaceWith() は、2 つのパラメーターも関数に渡します。最初のパラメーターは、一致する要素内の現在の要素の index で、2 番目のパラメーターは、要素の現在の内部 HTML コンテンツ (innerHTML) です。 関数の戻り値は、置換に使用されるコンテンツです(HTML文字列、DOM要素、またはjQueryオブジェクトの可能性があります)。

戻り値

replaceWith() 関数の戻り値は jQuery 型で、現在の jQuery オブジェクト自体を返します (ただし、一致する要素はドキュメントから削除されています)。置き換えられたノードに関連付けられた

すべてのデータとイベント ハンドラーも削除されます。

注: 置換要素が現在のページ内の要素である場合、その要素は元の位置から消えます。これは、コピー操作ではなく、移動操作に相当します。

例と説明

replaceWith() 関数は、一致した各要素のすべてのコンテンツの外側で指定された要素をラップするために使用されます:

<p>段落文本1<span></span></p>
<p>段落文本2<span></span></p>
<script type="text/javascript">
$("p").replaceWith( &#39;<em></em>&#39; ); 
</script>
<!--以下是jQuery代码执行后的html内容-->
<em></em>
<em></em>

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

var $A = $("s1");
var $B = $("s2");
// 将$A替换成$B
$A.replaceWith( $B ); // 返回$A
// 将$B替换成$A
$A.replaceAll( $B ); // 返回表示替换内容的jQuery对象( 匹配替换掉$B的所有$A元素 )

Please次の HTML コード (元の HTML コード) を参照してください。

<p id="n1">
    <span id="n2">foo</span>    
</p>
<p id="n3">
    <label id="n4">[label#n4]</label>
    <span id="n5">bar</span>
</p>
<div id="n6"></div>

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

// 将所有span元素替换为指定的em元素
$("span").replaceWith( &#39;<em class="new">替代元素</em>&#39; );
// 将n6替换为n4
// n4将从原位置上消失
$("#n6").replaceWith( $("#n4") );
// 将所有p元素替换为div元素
$("p").replaceWith( function(i, innerHTML){
    return &#39;<div class="thread-&#39; + (i + 1) + &#39;">&#39; + innerHTML + &#39;</div>&#39;;       
} );

以下は、jQuery コードが実行された後の HTML コンテンツです (形式はまったく調整されていません）:

<div class="thread-1">
    <em class="new">替代元素</em>    
</div>
<div class="thread-2">   
    <em class="new">替代元素</em>
</div>
<label id="n4">[label#n4]</label>

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