JQuery.closest(),parent(),parents()寻找父结点


Posted in Javascript onFebruary 17, 2012

HTML代码,测试地址:jQuery 遍历 - closest() 方法

JQuery.closest(),parent(),parents()寻找父结点

------我粘代码上来,在页面上会自动隐藏(会显示一下)!谁能教我这是肿么回事!
1.通过item-1查找 level-3(查找直接上级)
$('li.item-1').closest('ul') 
$('li.item-1').parent() 
$('li.item-1').parents().eq(0)

2.通过item-1查找 level-2(通过选择器查找父元素)
$('li.item-1').closest('.level-2') 
//$('li.item-1').parent('.level-2') //找不到,parent()方法只遍历到上一层! 
$('li.item-1').parent().parent() //这个太二了有木有! 
$('li.item-1').parents('.level-2')

parent(selector)中selector的用法
$('li').parent() //返回level-3,level-2和level-1的集合,它们都是li的父元素 
$('li').parent('.level-3') //在上述集合中筛选出 level-3

3.closest方法从当前元素开始遍历,而parent()从父元素开始!
$('li.item-1').closest('li') //返回 item-1,使用时要注意,如果是一个div嵌套在中一个div中,要考虑选择器的正确使用!
4.closet(selector,context)中context参数的用法 从当前元素开始遍历到context元素结束,若不存在context参数遍历到根结点
由此可见使用context参数可以提高查询效率!
var listItemII = document.getElementById('ii'); //Item-II 
//var listItemII=$(‘#ii'),这个不行,困惑好很久! 
$('li.item-1').closest('ul', listItemII).css('background-color', 'red'); 
//结果必须是 item-1的父级ul元素,itemII的子元素, 
$('li.item-1').closest('#one', listItemII).css('background-color', 'green'); 
//item-1的id=one的元素,且必须是itemII的子元素,未找到

5.context参数的分析
closest: function( selectors, context ) { 
var ret = [], i, l, cur = this[0]; 
// String 
var pos = POS.test( selectors ) || typeof selectors !== "string" ? 
jQuery( selectors, context || this.context ) : 
0; 
for ( i = 0, l = this.length; i < l; i++ ) { 
cur = this[i]; 
while ( cur ) { 
if ( pos ? pos.index(cur) > -1 : jQuery.find.matchesSelector(cur, selectors) ) { 
//找到匹配元素,则将其添加返回值集合中!跳到下一元素的查找 
ret.push( cur ); 
break; 
} else { 
cur = cur.parentNode; 
//向上遍历DOM树,匹配选择器 
//在上述过程中如果父结点不存在,到达根结点不存在或者找到context结点(已到达指定位置)! 
if ( !cur || !cur.ownerDocument || cur === context || cur.nodeType === 11 ) { 
break; 
} 
} 
} 
} 
ret = ret.length > 1 ? jQuery.unique( ret ) : ret; 
return this.pushStack( ret, "closest", selectors ); 
}

对JQuery源码不是很了解,其中的一些细节就不解释了!
通过closest()的定义可以得知,与context进行对比的变量cur=this[i]是一个DOM对象,而$('#ii')方法得到的是一个JQuery对象,因此传给closest(selector,context)方法的context参数必须通过DOM方法获得!
jQuery对象和DOM对象的转换?
1.获取对象(变量名前加$目的为约定区别JQuery和DOM变量):
获取jQuery对象:var $variable=jQuery对象;
获取DOM对象:var variable=DOM对象;
2.jQuery对象转DOM对象:
利用数组转换 var cr=$("#cr")[0];
利用get(index)方法转换 var cr=$("#cr").get(0);
3.DOM对象转jQuery对象:
var cr=document.getElementsById("cr"); //获取DOM对象 
var $cr=$(cr);//转换为jQuery对象

SO….
$('li.item-1').closest('#one', $(‘#ii').get(0))//如此使用
或者将源码中 "cur===context”的判断改为 "$(cur)===$(current)",这样就可以兼容两种用法!
当然,修改源码并不是一个好建议,但是为什么JQuery本身没有使用这种方式呢……求指教 !!!
Javascript 相关文章推荐
破解Session cookie的方法
Jul 28 Javascript
推荐40个简单的 jQuery 导航插件和教程(下篇)
Sep 14 Javascript
jQuery对象初始化的传参方式
Feb 26 Javascript
多种js图片预加载实现方式分享
Feb 19 Javascript
jQuery选择器及jquery案例详解(必看)
May 20 Javascript
详解vue.js全局组件和局部组件
Apr 10 Javascript
React Native模块之Permissions权限申请的实例相机
Sep 28 Javascript
vue2实现数据请求显示loading图
Nov 28 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 jQuery
js计时事件实现圆形时钟
Mar 25 Javascript
关于Vue中$refs的探索浅析
Nov 05 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
Nov 09 Javascript
JavaScript操作XML 使用百度RSS作为新闻源示例
Feb 17 #Javascript
jquery实现奇偶行赋值不同css值
Feb 17 #Javascript
qTip2 精致的基于jQuery提示信息插件
Feb 17 #Javascript
javascript suggest效果 自动完成实现代码分享
Feb 17 #Javascript
同一页面多个商品倒计时JS 基于面向对象的javascript
Feb 16 #Javascript
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
Feb 16 #Javascript
通过JS获取用户本地图片路径并显示的代码
Feb 16 #Javascript
You might like
php静态文件生成类实例分析
2015/01/03 PHP
php基于PDO实现功能强大的MYSQL封装类实例
2017/02/27 PHP
PHP如何实现订单的延时处理详解
2017/12/30 PHP
YII框架实现自定义第三方扩展操作示例
2019/04/26 PHP
javascript 拖放效果实现代码
2010/01/22 Javascript
js控制页面的全屏展示和退出全屏显示的方法
2015/03/10 Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
2015/06/26 Javascript
jquery+css实现的红色线条横向二级菜单效果
2015/08/22 Javascript
一波JavaScript日期判断脚本分享
2016/03/06 Javascript
jQuery实现表格元素动态创建功能
2017/01/09 Javascript
教你快速搭建Node.Js服务器的方法教程
2017/03/30 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
2017/07/19 jQuery
详解Webpack实战之构建 Electron 应用
2017/12/25 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
2018/06/09 jQuery
使用Nuxt.js改造已有项目的方法
2018/08/07 Javascript
vue使用v-for实现hover点击效果
2018/09/29 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
2020/04/13 Javascript
Node.js API详解之 querystring用法实例分析
2020/04/29 Javascript
JavaScript实现原型封装轮播图
2020/12/27 Javascript
linux 下实现python多版本安装实践
2014/11/18 Python
Python使用pip安装报错:is not a supported wheel on this platform的解决方法
2018/01/23 Python
Python之两种模式的生产者消费者模型详解
2018/10/26 Python
python虚拟环境完美部署教程
2019/08/06 Python
python点击鼠标获取坐标(Graphics)
2019/08/10 Python
Python telnet登陆功能实现代码
2020/04/16 Python
HTML如何让IMG自动适应DIV容器大小的实现方法
2020/02/25 HTML / CSS
来自全球大都市的高级街头服饰:Pegador
2018/01/03 全球购物
澳大利亚床上用品、浴巾和家居用品购物网站:Bambury
2020/04/16 全球购物
交通事故检查书范文
2014/01/30 职场文书
经贸日语专业自荐信
2014/09/02 职场文书
法定代表人授权委托书范本
2014/10/07 职场文书
家长会欢迎词
2015/01/23 职场文书
教师廉洁自律个人总结
2015/02/10 职场文书
2015年信贷员工作总结
2015/04/28 职场文书
Golang解析JSON对象
2022/04/30 Golang
SQL Server中锁的用法
2022/05/20 SQL Server