jQuery.replaceWith() 函數詳解-js教程-PHP中文網

jQuery.replaceWith() 函數詳解

巴扎黑

發布： 2017-06-24 14:28:05

原創

2256 人瀏覽過

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( &#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元素 )

登入後複製

請參考下面這段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中文網其他相關文章！