jQuery.before() 函數詳解

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

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

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

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

語法

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

參數

參數 說明

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

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

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

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

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

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

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

傳回值

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

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

範例&說明

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

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

請注意before()函數和insertBefore()函數的差異：

var $A = $("s1");
var $B = $("s2");
// 将$B插入到$A之前
$A.before( $B ); // 返回$A
// 将$A插入到$B之前
$A.insertBefore( $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範例程式碼用於示範before()函數的具體用法：

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

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

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

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