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">'<em></em>'<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">// 其返回值就是匹配替换内容(两个'<em></em>')的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">'<em class="new">替代元素</em>'<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()函數用來使用指定的元素取代每個符合的元素。
此函數屬於jQuery物件(實例)。
語法
jQuery 1.2 新增此函數。
jQueryObject.replaceWith( replacement )
登入後複製
參數
| #參數 | 描述 |
|---|
| replacement | String/Element/jQuery/Function類型用於替代的元素。 |
如果參數replacement為字串，則將其視為html字串。
jQuery 1.4 新增支援：參數replacement可以為函數。 replaceWith()將根據匹配的所有元素遍歷執行該函數，函數中的this將指向對應的DOM元素。
replaceWith()也會為函數傳入兩個參數：第一個參數就是目前元素在符合元素中的索引，第二個參數就是該元素目前的內部html內容(innerHTML)。函數的回傳值就是用來替換的內容(可以是html字串、DOM元素、jQuery物件)。
傳回值
replaceWith()函數的傳回值為jQuery類型，傳回目前jQuery物件本身(雖然其符合的元素已從文件中移除)。
與被替換掉的節點關聯的所有資料和事件處理器也將同時移除。
注意：如果replacement元素是目前頁面中的元素，則該元素將從原始位置上消失。這相當於一個移動操作，而不是一個複製操作。
範例&說明
#replaceWith()函數用於在每個符合元素的所有內容外部包裹指定的元素：
段落文本1
<br/>段落文本2
<br/><br/> type="text/javascript"><br/>$("p").replaceWith( '' ); <br/><br/><br/><br/><br/>
登入後複製
請注意replaceWith()與replaceAll()函數之間的差異：
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元素 )登入後複製
請參考下面這段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範例程式碼，用於示範replaceWith()函數的具體用法：
// 将所有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/>} );登入後複製
執行程式碼
以下是jQuery程式碼執行後的html內容(格式未作任何調整)：
class="thread-1"><br/> class="new">替代元素 <br/><br/> class="thread-2"><br/> <br/> class="new">替代元素<br/><br/> id="n4">[label#n4]
登入後複製
以上是jquery之replaceAll(),replaceWith()方法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
