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 初体验(建议学习jquery)
Apr 25 Javascript
javascript window.opener的用法分析
Apr 07 Javascript
ExtJS4 动态生成的grid导出为excel示例
May 02 Javascript
使用node.js半年来总结的 10 条经验
Aug 18 Javascript
jquery中添加属性和删除属性
Jun 03 Javascript
详解JavaScript时间格式化
Dec 23 Javascript
jquery replace方法去空格
May 08 jQuery
vue.js实现刷新当前页面的方法教程
Jul 05 Javascript
JavaScript实现二维坐标点排序效果
Jul 18 Javascript
ES6学习笔记之let与const用法实例分析
Jan 22 Javascript
vue+flask实现视频合成功能(拖拽上传)
Mar 04 Vue.js
React四级菜单的实现
Apr 08 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
开源SNS系统-ThinkSNS
2008/05/18 PHP
用Json实现PHP与JavaScript间数据交换的方法详解
2013/06/20 PHP
简要剖析PHP的Yii框架的组件化机制的基本知识
2016/03/17 PHP
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
2010/05/13 Javascript
node.js中RPC(远程过程调用)的实现原理介绍
2014/12/05 Javascript
用队列模拟jquery的动画算法实例
2015/01/20 Javascript
详解nodejs中exports和module.exports的区别
2017/02/17 NodeJs
详解ECMAScript6入门--Class对象
2017/04/27 Javascript
javascript 跨域问题以及解决办法
2017/07/17 Javascript
nodejs 图片预览和上传的示例代码
2017/09/30 NodeJs
Three.js加载外部模型的教程详解
2017/11/10 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
2019/09/06 Javascript
Vue 自定义指令实现一键 Copy功能
2019/09/16 Javascript
vue 点击其他区域关闭自定义div操作
2020/07/17 Javascript
vue中el-input绑定键盘按键(按键修饰符)
2020/07/22 Javascript
Python中输出ASCII大文字、艺术字、字符字小技巧
2015/04/28 Python
python使用Turtle库绘制动态钟表
2018/11/19 Python
Django 模型类(models.py)的定义详解
2019/07/19 Python
Python logging设置和logger解析
2019/08/28 Python
python快速排序的实现及运行时间比较
2019/11/22 Python
Python vtk读取并显示dicom文件示例
2020/01/13 Python
关于win10在tensorflow的安装及在pycharm中运行步骤详解
2020/03/16 Python
Selenium向iframe富文本框输入内容过程图解
2020/04/10 Python
Python调用shell cmd方法代码示例解析
2020/06/18 Python
python 如何引入协程和原理分析
2020/11/30 Python
Django 权限管理(permissions)与用户组(group)详解
2020/11/30 Python
利用python实现后端写网页(flask框架)
2021/02/28 Python
详解Html5原生拖拽操作
2018/01/12 HTML / CSS
爱尔兰电子产品购物网站:Komplett.ie
2018/04/04 全球购物
TUMI马来西亚官方网站:国际领先的高品质商旅箱包品牌
2018/04/26 全球购物
合作意向书范本
2014/03/31 职场文书
诚信考试倡议书
2014/04/15 职场文书
工厂仓管员岗位职责范本
2014/07/17 职场文书
Centos环境下Postgresql 安装配置及环境变量配置技巧
2021/05/18 PostgreSQL
golang的文件创建及读写操作
2022/04/14 Golang
java实现web实时消息推送的七种方案
2022/07/23 Java/Android