jquery是一款非常強大的JavaScript庫,其功能強大且易于使用,尤其是其中的nextall方法,可以針對當前元素找到其之后的所有同級元素,下面我們來看一下nextall方法的源碼。
jQuery.fn.nextAll = function( selector ) { var n, r; if ( this[ 0 ] ) { n = this[ 0 ]; r = []; while ( n.nextElementSibling ) { n = n.nextElementSibling; if ( selector ) { if ( jQuery.filter( selector, [ n ] ).length ) { r.push( n ); } } else { r.push( n ); } } } return this.pushStack( r ); };
上述代碼中,我們可以看到nextAll實際上是jQuery.fn的一個方法,接收一個選擇器參數,其實現主要分為兩個部分:找到當前元素的下一個兄弟元素,以及對該兄弟元素進行過濾。
首先,nextAll方法通過this數組來獲取調用該方法的元素,并取出其中的第一個元素n。
if ( this[ 0 ] ) { n = this[ 0 ]; }
接下來就是找到n的所有后續兄弟元素,直到沒有更多的兄弟元素為止。
while ( n.nextElementSibling ) { n = n.nextElementSibling; }
通過這個循環,我們可以得到n之后的所有元素,將它們存入一個數組r中。
r = []; while ( n.nextElementSibling ) { n = n.nextElementSibling; r.push( n ); }
最后,對r進行過濾,用選擇器selector對r中的元素進行過濾,并將過濾后的元素返回。
if ( selector ) { if ( jQuery.filter( selector, [ n ] ).length ) { r.push( n ); } } else { r.push( n ); }
需要注意的是,在對r進行過濾時,jQuery.filter方法會返回一個含有過濾后元素的數組,我們只需確定該數組的長度是否為0即可得到過濾后的元素是否存在。
最后,將過濾后的元素包裝成一個新的jQuery對象返回。
return this.pushStack( r );
總之,通過這篇文章,我們詳細了解了jquery nextall方法的實現源碼,今后在使用nextall方法時,可以更好地理解其背后的實現機理。