jquery next nextAll nextUntil siblings的區(qū)別介紹

更新時間：2013年10月05日 17:19:38 作者：

在本文為大家詳細介紹下jquery next nextAll nextUntil siblings的區(qū)別，感興趣的朋友可以參考下

next：緊挨著$('')的一個元素

nextAll：在$('')以后的所有的同輩元素

nextUntil：until有直到。。。之前的意思，所以他表示$('')以后的所有的同輩元素，不過要在nextUntil參數(shù)之前，不包括匹配的元素本身

sibings:$('')前后的所有同輩元素

簡單理解就是，next就是找他的弟弟/妹妹，nextAll就是找他所有的弟弟/妹妹，nextUntil就是找比他小一定年齡的弟弟/妹妹，siblings就是找他所有的哥哥/姐姐，還有他的所有的弟弟/妹妹。所以同理的同輩關系，prev，prevAll ，prevUntil

下面是簡單的測試代碼

復制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 
<title>Document</title> 
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js'></script> 
</head> 
<body> 
<div class="first"> 
<a href="#">hhh</a> 
<h1>這是一個標題</h1> 
<p>這是一個test</p> 
<p>這是一個test</p> 
<p>這是一個test</p> 
<p>這是一個test</p> 
<div>hhha</div> 
<p>這是一個test</p> 
<p>這是一個test</p> 
</div> 
<script> 
$(function(){ 
//$('p:first').next().css('background','red'); 
//$('p:first').nextAll().css('background','yellow'); 
//$('p:first').nextUntil('div').css({'font-size':20,background:'red'}); 
//$('p:first').siblings().css('background','yellow'); 
}); 
</script> 
</body> 
</html> 

您可能感興趣的文章:

jquery 可拖拽的窗體控件實現(xiàn)代碼
這個是一個讓DOM元素可以拖拽的控件，代碼很簡單，我也是新手，不知道有沒有BUG，自己測試還行，希望大家發(fā)現(xiàn)BUG，踴躍提出，謝謝。這個是基于JQUERY開發(fā)的
2010-03-03
JQuery顯示隱藏頁面元素的方法總結
這篇文章主要介紹了JQuery顯示隱藏頁面元素的方法總結,本文分別講解了show()、hide()、toggle()、slideDown()、css()5種控制顯示隱藏某個DIV或P標簽等頁面元素的方法,需要的朋友可以參考下
2015-04-04
基于JQuery實現(xiàn)的圖片自動進行縮放和裁剪處理
頁面加載后，對不合比例的圖片自動進行縮放和裁剪處理，兼容圖像已在緩存或不在緩存的情況，基于JQuery
2014-01-01
淺析jquery如何判斷滾動條滾到頁面底部并執(zhí)行事件
jquery如何判斷滾動條滾到頁面底部并執(zhí)行事件？下面小編就為大家?guī)硪黄猨query判斷滾動條滾到頁面底部并執(zhí)行事件方法。希望對大家有所幫助，一起跟隨小編過來看看吧
2016-04-04
jQuery焦點圖左右轉(zhuǎn)換效果
這篇文章主要為大家詳細介紹了jQuery焦點圖左右轉(zhuǎn)換效果,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-12-12
簡單介紹jsonp 使用小結
Jsonp(JSON with Padding) 是 json 的一種"使用模式"，可以讓網(wǎng)頁從別的域名（網(wǎng)站）那獲取資料，即跨域讀取數(shù)據(jù)，本文給大家簡單介紹jsonp 使用小結，需要的朋友參考下
2016-01-01
jquery實現(xiàn)文本框鼠標右擊無效以及不能輸入的代碼
jquery實現(xiàn)文本框鼠標右擊無效以及不能輸入的實現(xiàn)方法，需要的朋友可以參考下。
2010-11-11
淺談jquery點擊label觸發(fā)2次的問題
下面小編就為大家?guī)硪黄獪\談jquery點擊label觸發(fā)2次的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-06-06
jquery實現(xiàn)點擊向下展開菜單項(伸縮導航)效果
這篇文章主要介紹了jquery實現(xiàn)點擊向下展開菜單項(伸縮導航)效果,通過jquery遍歷及匹配頁面元素并動態(tài)修改頁面元素樣式實現(xiàn)該功能,需要的朋友可以參考下
2015-08-08
深入理解jquery中的each用法
本文主要對jquery中的each用法進行介紹，相信會對大家學習each方法會很有幫助，下面就跟小編一起來看下吧
2016-12-12