jQuery中nextUntil()方法用法实例


Posted in Javascript onJanuary 07, 2015

本文实例讲述了jQuery中nextUntil()方法用法。分享给大家供大家参考。具体分析如下:

此函数查找指定元素之后所有的同辈元素,直到遇到匹配的那个元素为止,但不包括此匹配的元素。

语法结构一:

$(selector).closest(expr, filter)

参数列表:

参数 描述
expr 用于筛选匹配元素的表达式。
filter 可选。用于筛选nextUntil()函数通过expr表达式取得的jquery元素集合。

实例代码:

实例一:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="author" content="https://3water.com/" />

<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专区</li>

    <li class="js">Javascript专区</li>

    <li>Div+Css专区</li>

    <li class="jq">Jquery专区</li>

    <li>ASP专区</li>

    <li>JSP专区</li>

  </ul>

</div>

</body>

</html>

实例二:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="author" content="https://3water.com/" />

<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专区</li>

    <li class="js">Javascript专区</li>

    <li>Div+Css专区</li>

    <li class="jq">Jquery专区</li>

    <li>ASP专区</li>

    <li>JSP专区</li>

  </ul>

</div>

</body>

</html>

语法结构二:

$(selector).closest(element, filter)

参数列表:

参数 描述
element 用于筛选匹配元素的DOM对象。
filter 可选。用于筛选nextUntil()函数通过DOM对象取得的jquery元素集合。

实例代码:

实例一:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="author" content="https://3water.com/" />

<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专区</li>

    <li class="js">Javascript专区</li>

    <li>Div+Css专区</li>

    <li id="jq">Jquery专区</li>

    <li>ASP专区</li>

    <li>JSP专区</li>

  </ul>

</div>

</body>

</html>

实例二:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="author" content="https://3water.com/" />

<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专区</li>

    <li class="js">Javascript专区</li>

    <li>Div+Css专区</li>

    <li id="jq">Jquery专区</li>

    <li>ASP专区</li>

    <li>JSP专区</li>

  </ul>

</div>

</body>

</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
JQuery在光标位置插入内容的实现代码
Jun 18 Javascript
JavaScript对象创建及继承原理实例解剖
Feb 28 Javascript
javascript:void(0)使用探讨
Aug 27 Javascript
jquery基础教程之数组使用详解
Mar 10 Javascript
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
Mar 12 Javascript
3种js实现string的substring方法
Nov 09 Javascript
WebView启动支付宝客户端支付失败的问题小结
Jan 11 Javascript
js 获取今天以及过去日期
Apr 11 Javascript
ES6新特性六:promise对象实例详解
Apr 21 Javascript
get  post jsonp三种数据交互形式实例详解
Aug 25 Javascript
如何解决React官方脚手架不支持Less的问题(小结)
Sep 12 Javascript
详解滑动穿透(锁body)终极探索
Apr 16 Javascript
jQuery中nextAll()方法用法实例
Jan 07 #Javascript
jQuery中next()方法用法实例
Jan 07 #Javascript
jQuery中find()方法用法实例
Jan 07 #Javascript
jQuery中closest()函数用法实例
Jan 07 #Javascript
javascript实现全角与半角字符的转换
Jan 07 #Javascript
自己封装的常用javascript函数分享
Jan 07 #Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
Jan 07 #Javascript
You might like
thinkphp5修改view到根目录实例方法
2019/07/02 PHP
在laravel-admin中列表中禁止某行编辑、删除的方法
2019/10/03 PHP
关于javascript document.createDocumentFragment()
2009/04/04 Javascript
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
2010/11/05 Javascript
chrome浏览器不支持onmouseleave事件的解决技巧
2013/05/31 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
2015/08/03 Javascript
使用JQuery实现的分页插件分享
2015/11/05 Javascript
JavaScript获取当前url根目录(路径)
2016/06/17 Javascript
解决拦截器对ajax请求的拦截实例详解
2016/12/21 Javascript
基于JS设计12306登录页面
2016/12/28 Javascript
详解vue的数据binding绑定原理
2017/04/12 Javascript
Angularjs上传图片实例详解
2017/08/06 Javascript
微信小程序如何使用globalData的方法
2019/06/06 Javascript
vue路由权限校验功能的实现代码
2020/06/07 Javascript
vue+Element-ui前端实现分页效果
2020/11/15 Javascript
Element el-button 按钮组件的使用详解
2021/02/01 Javascript
Python学习笔记_数据排序方法
2014/05/22 Python
web.py获取上传文件名的正确方法
2014/08/26 Python
Python中用于计算对数的log()方法
2015/05/15 Python
python常用函数详解
2016/09/13 Python
利用Python破解斗地主残局详解
2017/06/30 Python
numpy添加新的维度:newaxis的方法
2018/08/02 Python
利用nohup来开启python文件的方法
2019/01/14 Python
Python数据库小程序源代码
2019/09/15 Python
python实现自动化报表功能(Oracle/plsql/Excel/多线程)
2019/12/02 Python
python实现自动清理重复文件
2020/08/24 Python
使用python-cv2实现Harr+Adaboost人脸识别的示例
2020/10/27 Python
体育教师工作总结的自我评价
2013/10/10 职场文书
学习标兵获奖感言
2014/02/20 职场文书
进步之星获奖感言
2014/02/22 职场文书
网络编辑职责
2014/03/01 职场文书
信用卡逾期证明示例
2014/09/13 职场文书
行政执法队伍作风整顿个人剖析材料
2014/10/11 职场文书
合作与交流自我评价
2015/03/09 职场文书
2016大学生暑期三下乡心得体会
2016/01/23 职场文书
Python使用永中文档转换服务
2022/05/06 Python