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 相关文章推荐
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
Mar 13 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
Nov 18 Javascript
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
Nov 30 Javascript
javascript动态获取登录时间和在线时长
Feb 25 Javascript
一个炫酷的Bootstrap导航菜单
Dec 28 Javascript
javascript使用递归算法求两个数字组合功能示例
Jan 03 Javascript
Bootstrap table使用方法总结
May 10 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
Jan 16 Javascript
微信小程序如何获取用户收货地址
Nov 27 Javascript
vue 实现小程序或商品秒杀倒计时
Apr 14 Javascript
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
关于Vue中的options选项
Mar 22 Vue.js
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
PHP动态编译出现Cannot find autoconf的解决方法
2014/11/05 PHP
php使用date和strtotime函数输出指定日期的方法
2014/11/14 PHP
Smarty分页实现方法完整实例
2016/05/11 PHP
微信公众平台开发-微信服务器IP接口实例(含源码)
2017/03/05 PHP
php之可变变量的实例详解
2017/09/12 PHP
监控 url fragment变化的js代码
2010/04/19 Javascript
用jQuery打造TabPanel效果代码
2010/05/22 Javascript
javascript框架设计读书笔记之字符串的扩展和修复
2014/12/02 Javascript
Javascript数据结构与算法之列表详解
2015/03/12 Javascript
同步异步动态引入js文件的几种方法总结
2016/09/23 Javascript
jQuery事件详解
2017/02/23 Javascript
php输出全部gb2312编码内的汉字方法
2017/03/04 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
2017/08/18 jQuery
使用Vue开发一个实时性时间转换指令
2018/01/17 Javascript
Vue2实时监听表单变化的示例讲解
2018/08/30 Javascript
微信小程序用户位置权限的获取方法(拒绝后提醒)
2018/11/15 Javascript
js实现图片上传到服务器和回显
2020/01/19 Javascript
Postman参数化实现过程及原理解析
2020/08/13 Javascript
[02:37]TI8勇士令状不朽珍藏II视频展示
2018/06/23 DOTA
[02:04]2020年夜魇暗潮预告片
2020/10/30 DOTA
python获取文件后缀名及批量更新目录下文件后缀名的方法
2014/11/11 Python
PYQT5设置textEdit自动滚屏的方法
2019/06/14 Python
python爬虫豆瓣网的模拟登录实现
2019/08/21 Python
python数据化运营的重要意义
2019/11/25 Python
python ubplot使用方法解析
2020/01/10 Python
Otticanet英国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/02/10 全球购物
Lentiamo荷兰:在线订购隐形眼镜、隐形眼镜液和太阳镜
2019/10/25 全球购物
介绍一下Linux文件的记录形式
2012/04/18 面试题
公司总经理岗位职责
2014/03/15 职场文书
2014领导班子“四风问题”对照检查材料思想汇报(执法局)
2014/09/21 职场文书
2014年为民办实事工作总结
2014/12/20 职场文书
毕业生政审意见范文
2015/06/04 职场文书
学习经验交流会演讲稿
2015/11/02 职场文书
2016年秋季运动会通讯稿
2015/11/25 职场文书
详解Python函数print用法
2021/06/18 Python
golang中字符串MD5生成方式总结
2021/07/04 Golang