首頁  >  文章  >  web前端  >  jQuery.prevUntil()函數實例用法詳解

jQuery.prevUntil()函數實例用法詳解

巴扎黑
巴扎黑原創
2017-06-24 10:02:471214瀏覽

prevUntil()函數用來選取每個符合元素之前所有的同儕元素,直到遇到符合指定表達式的元素為止,並以jQuery物件的形式傳回。

這裡的表達式是指:選擇器(字串)、DOM元素(Element)、jQuery物件。

你也可以使用選擇器來進一步縮小選取範圍,篩選出符合指定選擇器的元素。

與函數相對的是nextUntil()函數,用來選取每個符合元素之後的所有同儕元素,直到遇到符合指定表達式的元素為止。

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

語法

jQuery 1.4 新增此函數。

jQueryObject.prevUntil( [ untilExpr [, filter ] ] )

參數

參數 描述

untilExpr 可選/String/Element/jQuery類型指定的表達式,如果目前符合過程中遇到符合該表達式的元素就停止目前符合。

filter 可選/String類型指定的選擇器字串,用於篩選匹配的元素。

prevUntil()函數會選取目前jQuery物件每個符合元素之前的所有同儕元素,直到遇到符合指定表達式untilExpr的元素(不包括該元素)為止。此外,我們也可以指定filter參數,用於進一步縮小篩選範圍,選取符合filter選擇器的元素。

如果省略untilExpr參數,則選取先前的所有同儕元素。

jQuery 1.6 新增支援:參數untilExpr可以為DOM元素(Element)或jQuery物件。

傳回值

prevUntil()函數的回傳值為jQuery類型,傳回一個新的jQuery對象,該物件封裝了目前jQuery物件每個符合元素之前的所有符合選擇器filter(如果指定了的話)的同儕元素,直到遇到符合指定表達式untilExpr的元素為止。

如果沒有符合條件的元素,則傳回空的jQuery物件。

範例&說明

prevUntil()函數與prevAll()函數有以下等價程式碼:

// 这里的selector表示任意的选择器
// 两者均不带任何参数
$("selector").prevUntil( );
// 等价于
$("selector").prevAll( );

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

<p id="n1">
    <span id="n2" class="foo"></span>
    <label id="n3"></label>
    <span id="n4"></span>
    <span id="n5" class="foo"></span>
</p>
<p id="n6">
    <strong id="n7" class="active"></strong>
    <span id="n8"></span>
    <span id="n9" class="foo"></span>
    <label id="n10"></label>
</p>

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

//返回jQuery对象所有匹配元素的标识信息数组
//每个元素形如:tagName或tagName#id(如果有id的话)
function getTagsInfo($doms){
    return $doms.map(function(){
        return this.tagName + (this.id ? "#" + this.id : "");
    }).get();
}
var $n5 = $("#n5");
//匹配n5之前的所有同辈元素,直到遇到包含类名"foo"的元素为止
var $elements = $n5.prevUntil(".foo");
document.writeln( getTagsInfo( $elements ) ); // SPAN#n4,LABEL#n3
//匹配n5之前的所有同辈元素,直到遇到label元素为止
var $matches = $n5.prevUntil("label");
document.writeln( getTagsInfo( $matches ) ); // SPAN#n4
var $label = $("label");
//匹配n5之前包含类名"foo"的所有同辈span元素,直到遇到包含类名"active"的元素为止
var $span_foo = $label.prevUntil(".active", "span.foo");
document.writeln( getTagsInfo( $span_foo ) ); // SPAN#n9,SPAN#n2
var $n9 = $("#n9");
//不带任何参数的prevUntil()函数等价于不带任何参数的prevAll()函数
var $result = $n9.prevUntil( );
document.writeln( getTagsInfo( $result ) ); // SPAN#n8,STRONG#n7

以上是jQuery.prevUntil()函數實例用法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn