jQuery.after() 函數詳解

after()函數用於在每個符合元素之後插入指定的內容。

指定的內容可以是：html字串、DOM元素(或陣列)、jQuery物件、函數(傳回值)。

與該函數相對的是before()函數，用於在每個匹配元素之前插入指定的內容。

此函數屬於jQuery物件(實例)。

語法

jQueryObject.after( content1 [, content2 [, contentN ]] )

參數

參數 說明

content1 String/Element/jQuery/Function類型指定的追加內容。

content2 可選/String/Element/jQuery類型指定的追加內容。

contentN 可選/String/Element/jQuery類型指定的追加內容，可以有任意多個。

after()可以將多個參數所表示的內容全部插入到緊鄰每個匹配元素之後的位置。如果參數為字串類型，則將其視為html字串。

jQuery 1.4 新增支援：參數content1可以為函數。 after()將根據匹配的所有元素遍歷執行該函數，函數中的this將指向對應的DOM元素。

after()也會為函數傳入兩個參數：第一個參數就是目前元素在符合元素中的索引，第二個參數就是該元素目前的內部html內容(innerHTML)。 函數的回傳值就是需要插入的內容(可以是html字串、DOM元素、jQuery物件)。

注意：只有第一個參數可以為自訂函數，用於遍歷執行。如果之後的參數也為函數，則呼叫其toString()方法，將其轉為字串，並視為html內容。

傳回值

after()函數的傳回值為jQuery類型，傳回目前jQuery物件本身(以便於進行鍊式風格的程式設計)。

注意：如果插入的內容是目前頁面中的某些元素，那麼這些元素將從原始位置上消失。簡而言之，這相當於一個移動操作，而不是複製操作。

範例&說明

after()函數用於在每個符合元素之後的位置插入內容：

<p>段落文本1<span></span></p><!--插入到p元素之后的位置-->
<p>段落文本2<span></span></p><!--插入到p元素之后的位置-->
<script type="text/javascript">
$("p").after( &#39;<!--插入到p元素之后的位置-->&#39; ); 
</script>

請注意after()函數和insertAfter()函數的差異：

var $A = $("s1");
var $B = $("s2");
// 将$B插入到$A之后
$A.after( $B ); // 返回$A
// 将$A插入到$B之后
$A.insertAfter( $B ); // 返回表示插入内容的jQuery对象( 匹配所有$B之后插入的$A元素 )

以下面這段HTML程式碼為例：

<p id="n1">
    <span id="n2">span#n2</span>    
</p>
<p id="n3">
    <label id="n4">label#n4</label>
    <i id="n5">i#n5</i>
</p>

以下jQuery範例程式碼用於示範after()函數的具體用法：

// 在n4之后插入一个自定义的span元素
$("#n4").after(&#39;<span id="n6">span#n6(new)</span>&#39;);
// 在n2之后插入n5
// n5将从原位置上消失
$("#n2").after( document.getElementById("n5") );
// 在每个span元素之后插入自定义的strong元素
$("span").after( function(index, innerHTML){
    return &#39;<strong>strong元素&#39; + (index + 1) + &#39;</strong>&#39;;
} );

after( )會將內容插入指定元素的結束標記之後，不會額外添加任何空白字符，上述程式碼執行後的完整html代碼如下(格式未作任何調整)：

<p id="n1">
    <span id="n2">span#n2</span><strong>strong元素1</strong><i id="n5">i#n5</i>    
</p>
<p id="n3">
    <label id="n4">label#n4</label><span id="n6">span#n6(new)</span><strong>strong元素2</strong>
    
</p>

以上是jQuery.after() 函數詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！