jquery之replaceAll(),replaceWith()方法詳解

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()函數的具體用法：

<br/>

// 将所有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/>} );

<br/>

執行程式碼

<br/>

以下是jQuery程式碼執行後的html內容(格式未作任何調整)：

<br/>

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

<br/><br/>

以上是jquery之replaceAll(),replaceWith()方法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！