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 相关文章推荐
juqery 学习之三 选择器 简单 内容
Nov 25 Javascript
jquery入门—访问DOM对象方法
Jan 07 Javascript
javascript组合使用构造函数模式和原型模式实例
Jun 04 Javascript
JavaScript中的各种操作符使用总结
May 26 Javascript
AngularJS入门教程之模块化操作用法示例
Nov 02 Javascript
angular directive的简单使用总结
May 24 Javascript
node中使用es6/7/8(支持性与性能)
Mar 28 Javascript
解决vue 单文件组件中样式加载问题
Apr 24 Javascript
详解使用JWT实现单点登录(完全跨域方案)
Aug 02 Javascript
vue滑动吸顶及锚点定位的示例代码
May 10 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
Aug 05 Javascript
Ajax常用封装库——Axios的使用
May 08 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
建立文件交换功能的脚本(二)
2006/10/09 PHP
我的论坛源代码(三)
2006/10/09 PHP
PHP 配置文件中open_basedir选项作用
2009/07/19 PHP
Prototype最新版(1.5 rc2)使用指南(1)
2007/01/10 Javascript
用JS实现一个页面多个css样式实现
2008/05/29 Javascript
jQuery 名称冲突的解决方法
2011/04/08 Javascript
原生JS可拖动弹窗效果实例代码
2013/11/09 Javascript
JavaScript将数据转换成整数的方法
2014/01/04 Javascript
javascript内置对象arguments详解
2014/03/16 Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
2014/12/15 Javascript
javascript实现图像循环明暗变化的方法
2015/02/25 Javascript
JS实现的网页背景闪电闪烁效果代码
2015/10/17 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
2016/04/29 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
2016/11/25 Javascript
获取JavaScript异步函数的返回值
2016/12/21 Javascript
bootstrap 表单验证使用方法
2017/01/11 Javascript
vue.js使用v-if实现显示与隐藏功能示例
2018/07/06 Javascript
JS复杂判断的更优雅写法代码详解
2018/11/07 Javascript
vue+axios实现post文件下载
2019/09/25 Javascript
[03:28]2014DOTA2国际邀请赛 EG战队官方纪录片
2014/07/21 DOTA
Django基础知识与基本应用入门教程
2018/07/20 Python
django如何连接已存在数据的数据库
2018/08/14 Python
Python发送邮件测试报告操作实例详解
2018/12/08 Python
Python学习笔记之抓取某只基金历史净值数据实战案例
2019/06/03 Python
Python偏函数Partial function使用方法实例详解
2020/06/17 Python
5个你不知道的HTML5的接口介绍
2013/08/07 HTML / CSS
出纳岗位职责
2013/11/09 职场文书
财产公证书格式
2014/04/10 职场文书
实现中国梦思想汇报2014
2014/09/13 职场文书
乡党委干部党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
党员违纪检讨书怎么写
2014/11/01 职场文书
三十年同学聚会感言
2015/07/30 职场文书
团结主题班会
2015/08/13 职场文书
2016年社区综治宣传月活动总结
2016/03/16 职场文书
JavaScript中MutationObServer监听DOM元素详情
2021/11/27 Javascript
sql查询语句之平均分、最高最低分及排序语句
2022/05/30 MySQL