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

標籤：

一：replaceAll()

replaceAll()函數用於使用當前匹配元素替換掉所有的目標元素。

該函數屬於jQuery對象(執行個體)。

文法

jQuery 1.2 新增該函數。

jQueryObject.replaceAll( target )

參數

參數	描述
target	String/Element/jQuery/Array類型被替換的目標元素，這些元素將被當前匹配元素替換掉。

如果參數target為字串，則將其視作jQuery選取器。

傳回值

replaceAll()函數的傳回值為jQuery類型，返回表示替換內容的jQuery對象。

與被替換掉的節點關聯的所有資料和事件處理器也將同時被移除。

注意：如果當前jQuery對象匹配的某個元素是頁面上的元素，則該元素將從原來位置上消失，這相當於一個移動操作，而不是一個複製操作。

樣本&說明

replaceAll()函數用於使用當前匹配元素替換掉所有的目標元素：

<p>段落文本1<span></span></p>
<p>段落文本2<span></span></p>

<script type="text/javascript">
$(‘<em></em>‘).replaceAll( "p" );
// 其傳回值就是匹配替換內容(兩個‘<em></em>‘)的jQuery對象
</script>

<!--以下是jQuery代碼執行後的html內容-->
<em></em>
<em></em>

請注意replaceAll()和replaceWith()函數之間的區別：

var $A = $("s1");
var $B = $("s2");


// 將$B替換成$A
$A.replaceAll( $B ); // 返回表示替換內容的jQuery對象( 匹配替換掉$B的所有$A元素 )
// 將$A替換成$B
$A.replaceWith( $B ); // 返回$A

請參考下面這段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範例程式碼，用於示範replaceAll()函數的具體用法：

// 用em元素替換掉所有的span元素
$(‘<em class="new">替代元素</em>‘).replaceAll( "span" );

// 用n4替換掉n6
// n4將從原位置上消失(替換到n6的位置)
$("#n4").replaceAll( $("#n6") );

運行代碼

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

<p id="n1">
    <em class="new">替代元素</em>    
</p>
<p id="n3">
    
    <em class="new">替代元素</em>
</p>
<label id="n4">[label#n4]</label>

二：replaceWith()

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()函數用於在每個匹配元素的所有內容外部包裹指定的元素：

<p>段落文本1<span></span></p>
<p>段落文本2<span></span></p>

<script type="text/javascript">
$("p").replaceWith( ‘<em></em>‘ ); 
</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元素 )

請參考下面這段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( ‘<em class="new">替代元素</em>‘ );

// 將n6替換為n4
// n4將從原位置上消失
$("#n6").replaceWith( $("#n4") );

// 將所有p元素替換為div元素
$("p").replaceWith( function(i, innerHTML){
    return ‘<div class="thread-‘ + (i + 1) + ‘">‘ + innerHTML + ‘</div>‘;       
} );

運行代碼

以下是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之replaceAll(),replaceWith()方法詳解