jqueryのreplaceAll(),replaceWith()メソッドの詳しい説明

replaceAll() 関数は、すべてのターゲット要素を現在一致する要素に置き換えるために使用されます。
replaceAll()函数用于使用当前匹配元素替换掉所有的目标元素。

该函数属于jQuery对象(实例)。

语法

jQuery 1.2 新增该函数。

jQueryObject.replaceAll( target )

参数

参数	描述
target	String/Element/jQuery/Array类型被替换的目标元素，这些元素将被当前匹配元素替换掉。

如果参数target为字符串，则将其视作jQuery选择器。

返回值

replaceAll()函数的返回值为jQuery类型，返回表示替换内容的jQuery对象。

与被替换掉的节点关联的所有数据和事件处理器也将同时被移除。

注意：如果当前jQuery对象匹配的某个元素是页面上的元素，则该元素将从原来位置上消失，这相当于一个移动操作，而不是一个复制操作。

示例&说明

replaceAll()函数用于使用当前匹配元素替换掉所有的目标元素：

<span class="tag"><p><span class="pln">段落文本1<span class="tag"><span></span></p><span class="pln"><br/><span class="tag"><p><span class="pln">段落文本2<span class="tag"><span></span></p><span class="pln"><br/><br/><span class="tag"><script<span class="pln"> <span class="atn">type<span class="pun">=<span class="atv">"text/<a href="http://www.php.cn/wiki/48.html" target="_blank">javascript</a>"<span class="tag">><span class="pln"><br/>$<span class="pun">(<span class="str">&#39;<em></em>&#39;<span class="pun">).<span class="pln">replaceAll<span class="pun">(<span class="pln"> <span class="str">"p"<span class="pln"> <span class="pun">);<span class="pln"><br/><span class="com">// 其返回值就是匹配替换内容(两个&#39;<em></em>&#39;)的jQuery对象<span class="pln"><br/><span class="tag"></script><span class="pln"><br/><br/><span class="com"><!--以下是jQuery代码执行后的html内容--><span class="pln"><br/><span class="tag"><em></em><span class="pln"><br/><span class="tag"><em></em></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

请注意replaceAll()和replaceWith()函数之间的区别：

<span class="kwd">var<span class="pln"> $A <span class="pun">=<span class="pln"> $<span class="pun">(<span class="str">"s1"<span class="pun">);<span class="pln"><br/><span class="kwd">var<span class="pln"> $B <span class="pun">=<span class="pln"> $<span class="pun">(<span class="str">"s2"<span class="pun">);<span class="pln"><br/><br/><br/><span class="com">// 将$B替换成$A<span class="pln"><br/>$A<span class="pun">.<span class="pln">replaceAll<span class="pun">(<span class="pln"> $B <span class="pun">);<span class="pln"> <span class="com">// 返回表示替换内容的jQuery对象( 匹配替换掉$B的所有$A元素 )<span class="pln"><br/><span class="com">// 将$A替换成$B<span class="pln"><br/>$A<span class="pun">.<span class="pln">replaceWith<span class="pun">(<span class="pln"> $B <span class="pun">);<span class="pln"> <span class="com">// 返回$A</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

请参考下面这段HTML代码(原HTML代码)：

<span class="tag"><p<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n1"<span class="tag">><span class="pln"><br/>    <span class="tag"><span<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n2"<span class="tag">><span class="pln">foo<span class="tag"></span><span class="pln">    <br/><span class="tag"></p><span class="pln"><br/><span class="tag"><p<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n3"<span class="tag">><span class="pln"><br/>    <span class="tag"><label<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n4"<span class="tag">><span class="pln">[label#n4]<span class="tag"></label><span class="pln"><br/>    <span class="tag"><span<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n5"<span class="tag">><span class="pln">bar<span class="tag"></span><span class="pln"><br/><span class="tag"></p><span class="pln"><br/><span class="tag"><p<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n6"<span class="tag">></p></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

以下jQuery示例代码，用于演示replaceAll()函数的具体用法：

<span class="com">// 用em元素替换掉所有的span元素<span class="pln"><br/>$<span class="pun">(<span class="str">&#39;<em class="new">替代元素</em>&#39;<span class="pun">).<span class="pln">replaceAll<span class="pun">(<span class="pln"> <span class="str">"span"<span class="pln"> <span class="pun">);<span class="pln"><br/><br/><span class="com">// 用n4替换掉n6<span class="pln"><br/><span class="com">// n4将从原位置上消失(替换到n6的位置)<span class="pln"><br/>$<span class="pun">(<span class="str">"#n4"<span class="pun">).<span class="pln">replaceAll<span class="pun">(<span class="pln"> $<span class="pun">(<span class="str">"#n6"<span class="pun">)<span class="pln"> <span class="pun">);</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

运行代码

以下是jQuery代码执行后的html内容(格式未作任何调整)：

<span class="tag"><p<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n1"<span class="tag">><span class="pln"><br/>    <span class="tag"><em<span class="pln"> <span class="atn">class<span class="pun">=<span class="atv">"new"<span class="tag">><span class="pln">替代元素<span class="tag"></em><span class="pln">    <br/><span class="tag"></p><span class="pln"><br/><span class="tag"><p<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n3"<span class="tag">><span class="pln"><br/>    <br/>    <span class="tag"><em<span class="pln"> <span class="atn">class<span class="pun">=<span class="atv">"new"<span class="tag">><span class="pln">替代元素<span class="tag"></em><span class="pln"><br/><span class="tag"></p><span class="pln"><br/><span class="tag"><label<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n4"<span class="tag">><span class="pln">[label#n4]<span class="tag"></label><br/><br/><strong><span style="font-size: 18pt;"><span style="color: #ff0000;">二：replaceWith()</span><br/></span></strong></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

replaceWith()函数用于使用指定的元素替换每个匹配的元素。

<br/>

该函数属于jQuery对象(实例)。

<br/>

语法

<br/>

jQuery 1.2 新增该函数。

<br/>

jQueryObject.replaceWith( replacement )

<br/>

参数

<br/>

参数	描述
replacement	String/Element/jQuery/Function类型用于替代的元素。

<br/>

如果参数replacement为字符串，则将其视作html字符串。

<br/>

jQuery 1.4 新增支持：参数replacement可以为函数。replaceWith()将根据匹配的所有元素遍历执行该函数，函数中的this将指向对应的DOM元素。

<br/>

replaceWith()还会为函数传入两个参数：第一个参数就是当前元素在匹配元素中的索引，第二个参数就是该元素当前的内部html内容(innerHTML)。函数的返回值就是用于替换的内容(可以是html字符串、DOM元素、jQuery对象)。

<br/>

返回值

<br/>

replaceWith()函数的返回值为jQuery类型，返回当前jQuery对象本身(虽然其匹配的元素已从文档中被移除)。

<br/>

与被替换掉的节点关联的所有数据和事件处理器也将同时被移除。

<br/>

注意：如果replacement元素是当前页面中的元素，则该元素将从原位置上消失。这相当于一个移动操作，而不是一个复制操作。

<br/>

示例&说明

<br/>

replaceWith()函数用于在每个匹配元素的所有内容外部包裹指定的元素：

<br/>

段落文本1
<br/>
段落文本2
<br/><br/> type="text/javascript"><br/>$("p").replaceWith( '' ); <br/><br/><br/><br/><br/>

<br/>

请注意replaceWith()和replaceAll()函数之间的区别：

<br/>

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

<br/>

请参考下面这段HTML代码(原HTML代码)：

<br/>

<span class="tag"><p<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n1"<span class="tag">><span class="pln"><br/>    <span class="tag"><span<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n2"<span class="tag">><span class="pln">foo<span class="tag"></span><span class="pln">    <br/><span class="tag"></p><span class="pln"><br/><span class="tag"><p<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n3"<span class="tag">><span class="pln"><br/>    <span class="tag"><label<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n4"<span class="tag">><span class="pln">[label#n4]<span class="tag"></label><span class="pln"><br/>    <span class="tag"><span<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n5"<span class="tag">><span class="pln">bar<span class="tag"></span><span class="pln"><br/><span class="tag"></p><span class="pln"><br/><span class="tag"><p<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n6"<span class="tag">></p></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

<br/>

以下jQuery示例代码，用于演示replaceWith()

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

構文

jQuery 1.2 この機能を追加しました。

<br/>

パラメータ

パラメータ	説明
target	String/Element/jQuery/Array タイプでターゲット要素が置き換えられ、これらの要素は現在一致する要素で置き換えられます。

パラメータ target が 文字列の場合、jQuery セレクターとして扱われます。 🎜

戻り値

🎜replaceAll()関数の戻り値は jQuery 型で、 は置換コンテンツを表す jQuery オブジェクトを返します。 🎜🎜置き換えられたノードに関連付けられたすべてのデータとイベント処理 デバイスも同時に削除されます。 🎜

注: 現在の jQuery オブジェクトと一致する要素がページ上の要素である場合、その要素は元の位置から消えます。これは < と同等です。 span class="blue">コピー操作ではなく、移動操作です。 🎜

例と説明

🎜replaceAll() 関数は、すべてのターゲット要素を現在一致する要素で置換するために使用されます: 🎜

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

🎜ご注意ください< code>replaceAll() 関数と replaceWith() 関数の違い: 🎜

<br/>

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

<br/>

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

<br/>

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

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

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

<br/><br/>

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

構文

rrreee🎜jQuery1.2 この機能を追加しました。 🎜rrreeerrreeerrreee

パラメータ

rrreee

パラメータ	説明
replacement	置換される要素には String/Element/jQuery/Function 型が使用されます。

rrreee🎜 パラメータ replacement が文字列の場合、 として扱われます。 html文字列。 🎜rrreee🎜jQuery 1.4 新しいサポート: パラメータ replacement を 関数にすることができます。 replaceWith() は、一致するすべての要素に基づいてこの関数を走査して実行し、関数内の this は対応する DOM 要素を指します。 🎜rrreee🎜replaceWith() は、関数の 2 つのパラメータも渡します。最初のパラメータは、一致する要素内の現在の要素です。 index の 2 番目のパラメータは、要素の現在の内部 HTML コンテンツ (innerHTML) です。関数の戻り値は、置換に使用されるコンテンツです (HTML 文字列、DOM 要素、または jQuery オブジェクトの可能性があります)。 🎜rrreee

戻り値

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

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

例と説明

rrreee🎜replaceWith() この関数は、一致する各要素のすべてのコンテンツの外側で指定された要素をラップするために使用されます。 🎜rrreeerrreeerrreee🎜replaceWith() 関数と replaceAll() 関数の違いに注意してください: 🎜rrreeerrreeerrreee🎜次の HTML コード (元の HTML コード) を参照してください: 🎜rrreeerrreeerrreee🎜次の jQuery サンプル コードreplaceWith() 関数の具体的な使用法を示します: 🎜rrreeerrreeerrreee🎜 コードを実行します🎜rrreee🎜 以下は、jQuery コードが実行された後の HTML コンテンツです (形式は調整されていません):🎜rrreeerrreeerrreee

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