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 相关文章推荐
js编码、解码函数介绍及其使用示例
Sep 05 Javascript
JavaScript中的字符串操作详解
Nov 12 Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
Dec 08 Javascript
创建js对象和js类的方法汇总
Dec 24 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
JS实现可视化文件上传
Sep 08 Javascript
微信小程序实现联动选择器
Feb 15 Javascript
基于Layui自定义模块的使用方法详解
Sep 14 Javascript
实例讲解React 组件
Jul 07 Javascript
vue绑定数字类型 value为数字的实例
Aug 31 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
Sep 10 Javascript
微信小程序自定义tabBar的踩坑实践记录
Nov 06 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
php面向对象全攻略 (十六) 对象的串行化
2009/09/30 PHP
PHP strip_tags()去除HTML、XML以及PHP的标签介绍
2014/02/18 PHP
体育彩票排列三组选三算法分享
2014/03/07 PHP
PHP中比较两个字符串找出第一个不同字符位置例子
2014/04/08 PHP
PHP采用XML-RPC构造Web Service实例教程
2014/07/16 PHP
PHP curl CURLOPT_RETURNTRANSFER参数的作用使用实例
2015/02/07 PHP
PHP会话控制实例分析
2016/12/24 PHP
PHP使用HTML5 FileApi实现Ajax上传文件功能示例
2019/07/01 PHP
表单序列化与jq中的serialize使用示例
2014/02/21 Javascript
Node.js开源应用框架HapiJS介绍
2015/01/14 Javascript
jQuery实现简单下拉导航效果
2015/09/07 Javascript
jquery无限级联下拉菜单简单实例演示
2015/11/23 Javascript
jQuery计算文本框字数及限制文本框字数的方法
2016/03/01 Javascript
分享12个非常实用的JavaScript小技巧
2016/05/11 Javascript
JavaScript省市级联下拉菜单实例
2017/02/14 Javascript
jQuery树控件zTree使用方法详解(一)
2017/02/28 Javascript
jQuery布局组件EasyUI Layout使用方法详解
2017/02/28 Javascript
10个在JavaScript开发中常遇到的BUG
2017/12/18 Javascript
vue 实现剪裁图片并上传服务器功能
2018/03/01 Javascript
Vue实现本地购物车功能
2018/12/05 Javascript
webpack 最佳配置指北(推荐)
2020/01/07 Javascript
vue学习笔记之Vue中css动画原理简单示例
2020/02/29 Javascript
[43:41]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
教你用Python脚本快速为iOS10生成图标和截屏
2016/09/22 Python
Python实现购物系统(示例讲解)
2017/09/13 Python
python 3.7.4 安装 opencv的教程
2019/10/10 Python
如何关掉pycharm中的python console(图解)
2019/10/31 Python
基于python2.7实现图形密码生成器的实例代码
2019/11/05 Python
利用Python实现朋友圈中的九宫格图片效果
2020/09/03 Python
美国专业级皮肤病和spa品质护肤品的高级零售网站:SkinCareRx
2017/02/06 全球购物
MAC Cosmetics巴西官方网站:M·A·C彩妆
2019/04/18 全球购物
市政施工员自我鉴定
2014/01/15 职场文书
师德师风事迹材料
2014/12/20 职场文书
职场:企业印章管理制度(模板)
2019/10/18 职场文书
Python通用验证码识别OCR库ddddocr的安装使用教程
2022/07/07 Python
Go语言编译原理之源码调试
2022/08/05 Golang