jQuery中nextUntil()方法用法實例
更新時間：2015年01月07日 10:59:32 投稿：shichen2014
這篇文章主要介紹了jQuery中nextUntil()方法用法,實例分析了nextUntil()方法的功能、定義及匹配同輩元素的技巧與注意事項,需要的朋友可以參考下
本文實例講述了jQuery中nextUntil()方法用法。分享給大家供大家參考。具體分析如下：
此函數(shù)查找指定元素之后所有的同輩元素，直到遇到匹配的那個元素為止，但不包括此匹配的元素。
語法結(jié)構(gòu)一:
復制代碼 代碼如下:
$(selector).closest(expr, filter)
參數(shù)列表:
實例代碼:
實例一:
復制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.fzitv.net/" />
<title>腳本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("li").eq(0).nextUntil(".jq").css("color","blue")
})
</script>
</head>
<body>
<div>
<ul>
<li>HTML專區(qū)</li>
<li class="js">Javascript專區(qū)</li>
<li>Div+Css專區(qū)</li>
<li class="jq">Jquery專區(qū)</li>
<li>ASP專區(qū)</li>
<li>JSP專區(qū)</li>
</ul>
</div>
</body>
</html>
實例二:
復制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.fzitv.net/" />
<title>腳本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("li").eq(0).nextUntil(".jq",".js").css("color","blue")
})
</script>
</head>
<body>
<div>
<ul>
<li>HTML專區(qū)</li>
<li class="js">Javascript專區(qū)</li>
<li>Div+Css專區(qū)</li>
<li class="jq">Jquery專區(qū)</li>
<li>ASP專區(qū)</li>
<li>JSP專區(qū)</li>
</ul>
</div>
</body>
</html>
語法結(jié)構(gòu)二:
復制代碼 代碼如下:
$(selector).closest(element, filter)
參數(shù)列表:
實例代碼:
實例一:
復制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.fzitv.net/" />
<title>腳本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("li").eq(0).nextUntil(document.getElementById("jq")).css("color","blue")
})
</script>
</head>
<body>
<div>
<ul>
<li>HTML專區(qū)</li>
<li class="js">Javascript專區(qū)</li>
<li>Div+Css專區(qū)</li>
<li id="jq">Jquery專區(qū)</li>
<li>ASP專區(qū)</li>
<li>JSP專區(qū)</li>
</ul>
</div>
</body>
</html>
實例二:
復制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.fzitv.net/" />
<title>腳本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("li").eq(0).nextUntil(document.getElementById("jq"),".js").css("color","blue")
})
</script>
</head>
<body>
<div>
<ul>
<li>HTML專區(qū)</li>
<li class="js">Javascript專區(qū)</li>
<li>Div+Css專區(qū)</li>
<li id="jq">Jquery專區(qū)</li>
<li>ASP專區(qū)</li>
<li>JSP專區(qū)</li>
</ul>
</div>
</body>
</html>
希望本文所述對大家的jQuery程序設計有所幫助。
相關文章
jquery form input 選擇，獲取 id為 instanceInfo form 下的 隱藏的input,需要的朋友可以參考下2014-04-04
這篇文章主要介紹了jQuery必不可少的小技巧，這些小技巧就像是創(chuàng)建的快捷方式，可以幫助大家快速開發(fā)，感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要介紹了jQuery實現(xiàn)的多滑動門，多選項卡效果代碼,具有tab切換與滑動門的功能,涉及鼠標事件的響應與頁面元素屬性動態(tài)變換操作相關實現(xiàn)技巧,需要的朋友可以參考下2016-03-03
jquery validate 實現(xiàn)動態(tài)增加/刪除驗證規(guī)則操作示例
這篇文章主要介紹了jquery validate 實現(xiàn)動態(tài)增加/刪除驗證規(guī)則操作,結(jié)合實例形式分析了jQuery validate表單驗證相關操作技巧,需要的朋友可以參考下2019-10-10
這篇文章主要介紹了jQuery+css實現(xiàn)的換頁標簽欄效果,涉及jQuery動態(tài)操作頁面元素構(gòu)造換頁標簽的相關技巧,需要的朋友可以參考下2016-01-01
這篇文章主要介紹了jquery插件之文字間歇自動向上滾動效果代碼,涉及jquery基于時間函數(shù)定時觸發(fā)頁面元素變換實現(xiàn)滾動效果的相關技巧,需要的朋友可以參考下2016-02-02
js獲取方法要比jq的方法麻煩的多，主要是因為FF瀏覽器，因為FF瀏覽器也會把換行當作dom元素，下面跟著小編一起來學習js jquery獲取當前元素的兄弟級 上一個 下一個元素的，需要的朋友一起來學習吧2015-09-09
基于Jquery實現(xiàn)表格動態(tài)分頁實現(xiàn)代碼
項目中經(jīng)常會對表格進行分頁，以下運用jquery對用戶管理中的用戶表格進行分頁。2011-06-06
如何使用jquery修改css中帶有!important的樣式屬性
如何使用jquery修改css中帶有!important的樣式屬性？下面小編就為大家?guī)硪黄褂胘query修改css中帶有!important的樣式屬性方法。希望對大家有所幫助。一起跟隨小編過來看看吧2016-04-04
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)視頻展示效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05