jQuery基于当前元素进行下一步的遍历


Posted in Javascript onMay 20, 2014

如果我们已经通过jQuery方法选中了一组元素,那么如何基于这些已经选中的元素进行下一步的遍历呢?

例如,我们通过

$('li:eq(1)')

选中了以下代码中的第二个li元素。

<ul> 
<li><a href="#">link</a></li> 
<li><a href="#">selected link</a></li> 
<li><a href="#">link</a></li> 
<li><a href="#">link</a></li> 
</ul>

基于这个选中的元素,我们可以进一步遍历其他元素

下一个元素

$('li:eq(1)').next()

前一个元素

$('li:eq(1)').prev()

父元素

$('li:eq(1)').parent()

所有兄弟元素

$('li:eq(1)').parent().children()

所有后续兄弟元素

$('li:eq(1)').nextAll()

所有前续兄弟元素

$('li:eq(1)').prevAll()

以上所有的遍历方法都可以使用end()方法来取消操作。

当然,也可以使用参数,例如

$('li:eq(1)').parent().children(':last')

Javascript 相关文章推荐
JavaScript 权威指南(第四版) 读书笔记
Aug 11 Javascript
JavaScript中的类继承
Nov 25 Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
May 28 Javascript
jQuery针对各类元素操作基础教程
Aug 29 Javascript
深入浅析JavaScript中prototype和proto的关系
Nov 15 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
Nov 23 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
Jan 23 Javascript
利用Vue实现移动端图片轮播组件的方法实例
Aug 23 Javascript
vue给input file绑定函数获取当前上传的对象完美实现方法
Dec 15 Javascript
vue生成文件本地打开查看效果的实例
Sep 06 Javascript
推荐一个基于Node.js的表单验证库
Feb 15 Javascript
layer弹出层显示在top顶层的方法
Sep 11 Javascript
jQuery 删除/替换DOM元素的几种方式
May 20 #Javascript
php实例分享之实现显示网站运行时间
May 20 #Javascript
jQuery使用andSelf()来包含之前的选择集
May 19 #Javascript
JQuery弹出层示例可自定义
May 19 #Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
May 19 #Javascript
js跨域访问示例(客户端/服务端)
May 19 #Javascript
jquery 表格排序、实时搜索表格内容(附图)
May 19 #Javascript
You might like
Cannot modify header information错误解决方法
2008/10/08 PHP
完美解决thinkphp验证码出错无法显示的方法
2014/12/09 PHP
Yii基于数组和对象的Model查询技巧实例详解
2015/12/28 PHP
PHP排序算法之希尔排序(Shell Sort)实例分析
2018/04/20 PHP
详解php与ethereum客户端交互
2018/04/28 PHP
PHP分页显示的方法分析【附PHP通用分页类】
2018/05/10 PHP
滚动经典最新话题[prototype框架]下编写
2006/10/03 Javascript
一起来写段JS drag拖动代码
2010/12/09 Javascript
JQuery优缺点分析说明
2011/04/10 Javascript
jquery的flexigrid无法显示数据提示获取到数据
2013/07/19 Javascript
Js 正则表达式知识汇总
2014/12/02 Javascript
分享纯手写漂亮的表单验证
2015/11/19 Javascript
js基础之DOM中document对象的常用属性方法详解
2016/10/28 Javascript
jQuery Ajax File Upload实例源码
2016/12/12 Javascript
微信小程序开发教程之增加mixin扩展
2017/08/09 Javascript
详谈js的变量提升以及使用方法
2018/10/06 Javascript
Vue.js的复用组件开发流程完整记录
2018/11/29 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
2020/10/20 Javascript
vue 使用rules对表单字段进行校验的步骤
2020/12/25 Vue.js
Vue项目中使用mock.js的完整步骤
2021/01/12 Vue.js
详谈python3中用for循环删除列表中元素的坑
2018/04/19 Python
Python3匿名函数用法示例
2018/07/25 Python
python多进程使用及线程池的使用方法代码详解
2018/10/24 Python
python+openCV调用摄像头拍摄和处理图片的实现
2019/08/06 Python
Python列表切片常用操作实例解析
2019/12/16 Python
python sorted函数原理解析及练习
2020/02/10 Python
css3隔行变换色实现示例
2014/02/19 HTML / CSS
CSS3 box-shadow属性实例详解
2020/06/19 HTML / CSS
Parts Express:音频、视频和扬声器的第一来源
2017/04/25 全球购物
京东奢侈品:全球奢侈品牌
2018/03/17 全球购物
图库照片、免版税图片、矢量艺术、视频片段:Depositphotos
2019/08/02 全球购物
Currentbody澳大利亚:美容仪专家
2019/11/11 全球购物
捷克购买家具网站:JENA nábytek
2020/03/19 全球购物
企业军训感言
2014/02/08 职场文书
青春寄语大全
2014/04/09 职场文书
深入理解java.lang.String类的不可变性
2021/06/27 Java/Android