jQuery中nextAll()方法用法实例


Posted in Javascript onJanuary 07, 2015

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

此方法查找匹配元素之后所有的同辈元素。也可以使用可选的表达式对同辈元素集合进行筛选。

语法结构:

$(selector).nextAll(expr)

参数列表:

参数 描述
expr 可选。用来过滤的表达式。

实例代码:

实例一:

<!DOCTYPE html>

<html>

<head>

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

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

<title>三水点靠木</title>

<style type="text/css"> 

.father{ 

  height:200px; 

  width:200px; 

  border:1px solid blue; 

} 

</style> 

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 

<script type="text/javascript"> 

$(document).ready(function(){ 

  $("p").nextAll().css("color","blue") 

}) 

</script> 

</head> 

<body> 

<div class="father"> 

  <p>我是p元素</p> 

  <span>我是span元素</span> 

  <p>我是p元素</p> 

  <div>我是div元素</div> 

</div> 

</body> 

</html>

将p元素之后的所有同辈元素中的字体颜色设置蓝色。

实例二:

<!DOCTYPE html>

<html>

<head>

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

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

<title>三水点靠木</title> 

<style type="text/css"> 

.father{ 

  height:200px; 

  width:200px; 

  border:1px solid blue; 

} 

</style> 

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 

<script type="text/javascript"> 

$(document).ready(function(){ 

  $("p").nextAll("div").css("color","blue") 

}) 

</script> 

</head> 

<body> 

<div class="father"> 

  <p>我是p元素</p> 

  <span>我是span元素</span> 

  <div>我是div元素</div> 

  <p>我是p元素</p> 

  <div>我是div元素</div> 

</div> 

</body> 

</html>

将p元素之后的所有同辈div元素中的字体颜色设置蓝色。

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

Javascript 相关文章推荐
JS 强制设为首页的代码
Jan 31 Javascript
JSON为什么那样红为什么要用json(另有洞天)
Dec 26 Javascript
Jquery网页出现的乱码问题的三种解决方法
Jun 30 Javascript
绑定回车enter事件代码
May 18 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
Oct 09 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
Jul 12 Javascript
js图片切换具体实现代码
Oct 13 Javascript
Javascript中return的使用与闭包详解
Jan 11 Javascript
Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法
Jun 29 Javascript
Vue起步(无cli)的啊教程详解
Apr 11 Javascript
node.js域名解析实现方法详解
Nov 05 Javascript
通过javascript实现扫雷游戏代码实例
Feb 09 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
Angular用来控制元素的展示与否的原生指令介绍
Jan 07 #Javascript
You might like
比较discuz和ecshop的截取字符串函数php版
2012/09/03 PHP
php防止伪造的数据从URL提交方法
2014/06/27 PHP
微信自定义分享php代码分析
2016/11/24 PHP
PHP的mysqli_set_charset()函数讲解
2019/01/23 PHP
jquery时间下拉框小例子
2013/04/15 Javascript
jQuery实现只允许输入数字和小数点的方法
2016/03/02 Javascript
利用纯Vue.js构建Bootstrap组件
2016/11/03 Javascript
vue resource post请求时遇到的坑
2017/10/19 Javascript
详解Express笔记之动态渲染HTML(新手入坑)
2018/12/13 Javascript
前端性能优化建议
2020/09/17 Javascript
JavaScript实现刮刮乐效果
2020/11/01 Javascript
python 实现删除文件或文件夹实例详解
2016/12/04 Python
使用Python的Django和layim实现即时通讯的方法
2018/05/25 Python
Python后台管理员管理前台会员信息的讲解
2019/01/28 Python
python openpyxl使用方法详解
2019/07/18 Python
pyCharm 设置调试输出窗口中文显示方式(字符码转换)
2020/06/09 Python
django 模型字段设置默认值代码
2020/07/15 Python
德国柯吉澳趣味家居:Koziol
2017/08/24 全球购物
美国特价机票专家:Airfarewatchdog
2018/01/24 全球购物
Crabtree & Evelyn英国官网:瑰珀翠护手霜、香水、沐浴和身体护理
2018/04/26 全球购物
应聘收银员个人的求职信
2013/11/30 职场文书
高二化学教学反思
2014/01/30 职场文书
3.15国际消费者权益日主题活动活动总结
2014/03/16 职场文书
竞争上岗实施方案
2014/03/21 职场文书
酒店总经理岗位职责范本
2014/08/08 职场文书
大一新生检讨书
2014/10/29 职场文书
2014年乡镇团委工作总结
2014/12/18 职场文书
学校食堂管理制度
2015/08/04 职场文书
七夕情人节问候语
2015/11/11 职场文书
2019年大学毕业生个人自我鉴定范文大全
2019/03/21 职场文书
话题作文之成长
2019/12/09 职场文书
Python爬虫之爬取某文库文档数据
2021/04/21 Python
Vue中插槽slot的使用方法与应用场景详析
2021/06/08 Vue.js
MySQL快速插入一亿测试数据
2021/06/23 MySQL
使用vue判断当前环境是安卓还是IOS
2022/04/12 Vue.js
django项目、vue项目部署云服务器的详细过程
2022/07/23 Servers