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 相关文章推荐
Mootools 1.2教程(21)——类(二)
Sep 15 Javascript
Javascript 复制数组实现代码
Nov 26 Javascript
ASP.NET中基于JQUERY的高性能的TreeView补充
Feb 23 Javascript
jquery cookie实现的简单换肤功能适合小网站
Aug 25 Javascript
javaScript 计算两个日期的天数相差(示例代码)
Dec 27 Javascript
jQuery trigger()方法用法介绍
Jan 13 Javascript
实现非常简单的js双向数据绑定
Nov 06 Javascript
js鼠标点击图片切换效果实现代码
Nov 19 Javascript
[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告
May 11 Javascript
vue按需加载实例详解
Sep 06 Javascript
深入浅析vue中cross-env的使用
Sep 12 Javascript
vue登录以及权限验证相关的实现
Oct 25 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
PHP读取XML值的代码(推荐)
2011/01/01 PHP
php 变量未定义等错误的解决方法
2011/01/12 PHP
PHP性能优化工具篇Benchmark类调试执行时间
2011/12/06 PHP
onkeypress字符按键兼容所有浏览器使用介绍
2013/04/24 Javascript
jquery实现pager控件示例
2014/04/09 Javascript
用js格式化金额可设置保留的小数位数
2014/05/09 Javascript
JS跨域问题详解
2014/11/25 Javascript
JavaScript生成二维码图片小结
2015/12/27 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
2016/03/01 Javascript
JavaScript判断数字是否为质数的方法汇总
2016/06/02 Javascript
jQuery+Pdo编写login登陆界面
2016/08/01 Javascript
浅析Jquery操作select
2016/12/13 Javascript
原生js实现商品放大镜效果
2017/01/12 Javascript
纯js仿淘宝京东商品放大镜功能
2017/03/02 Javascript
微信小程序多张图片上传功能
2017/06/07 Javascript
jquery之基本选择器practice(实例讲解)
2017/09/30 jQuery
javascript实现Emrips反质数枚举的示例代码
2017/12/06 Javascript
Vue+Koa2 打包后进行线上部署的教程详解
2019/07/31 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
2020/11/03 Javascript
[45:59]完美世界DOTA2联赛PWL S2 FTD vs GXR 第二场 11.22
2020/11/24 DOTA
Python检测一个对象是否为字符串类的方法
2015/05/21 Python
Python使用urllib2模块实现断点续传下载的方法
2015/06/17 Python
Python基于numpy灵活定义神经网络结构的方法
2017/08/19 Python
Python中的并发处理之asyncio包使用的详解
2018/04/03 Python
解决pyinstaller打包发布后的exe文件打开控制台闪退的问题
2019/06/21 Python
浅析Windows 嵌入python解释器的过程
2019/07/26 Python
安装Pycharm2019以及配置anconda教程的方法步骤
2019/11/11 Python
Pycharm打开已有项目配置python环境的方法
2020/07/03 Python
小露珠教学反思
2014/04/30 职场文书
医药销售自荐书
2014/05/29 职场文书
2014年社区民政工作总结
2014/12/02 职场文书
大学生自我评价范文
2015/03/03 职场文书
自愿离婚协议书范本2016
2016/03/18 职场文书
Python爬虫基础之简单说一下scrapy的框架结构
2021/06/26 Python
python工具dtreeviz决策树可视化和模型可解释性
2022/03/03 Python
Python实现科学占卜 让视频自动打码
2022/04/09 Python