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 相关文章推荐
取键盘键位ASCII码的网页
Jul 30 Javascript
JavaScript入门教程(12) js对象化编程
Jan 31 Javascript
Jquery判断IE6等浏览器的代码
Apr 05 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
Jun 27 Javascript
html a标签-超链接中confirm方法使用介绍
Jan 04 Javascript
运算符&amp;&amp;的三个不同层次
Apr 07 Javascript
vue快捷键与基础指令详解
Jun 01 Javascript
AngularJS ionic手势事件的使用总结
Aug 09 Javascript
vue进入页面时滚动条始终在底部代码实例
Mar 26 Javascript
javascript实现贪吃蛇游戏(娱乐版)
Aug 17 Javascript
Vue实现购物小球抛物线的方法实例
Nov 22 Vue.js
测量JavaScript函数的性能各种方式对比
Apr 27 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 PDO中文乱码解决办法
2009/07/20 PHP
php删除文件夹及其文件夹下所有文件的函数代码
2013/01/23 PHP
PHP中ob_start函数的使用说明
2013/11/11 PHP
php准确获取文件MIME类型的方法
2015/06/17 PHP
Laravel重写用户登录简单示例
2016/10/08 PHP
php curl获取到json对象并转成数组array的方法
2018/05/31 PHP
类似GMAIL的Ajax信息反馈显示
2010/02/16 Javascript
用js代码改变单选框选中状态的简单实例
2013/12/18 Javascript
100个不能错过的实用JS自定义函数
2014/03/05 Javascript
我的Node.js学习之路(二)NPM模块管理
2014/07/06 Javascript
Jquery动态替换div内容及动态展示的方法
2015/01/23 Javascript
使用mouse事件实现简单的鼠标经过特效
2015/01/30 Javascript
JavaScript使用yield模拟多线程的方法
2015/03/19 Javascript
nodejs中的fiber(纤程)库详解
2015/03/24 NodeJs
jQuery中hover与mouseover和mouseout的区别分析
2015/12/24 Javascript
Bootstrap轮播插件简单使用方法介绍
2016/06/21 Javascript
jQuery Dialog 取消右上角删除按钮事件
2016/09/07 Javascript
Boostrap基础教程之JavaScript插件篇
2016/09/08 Javascript
JavaScript、C# URL编码、解码总结
2017/01/21 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
2020/11/24 Javascript
js实现简单的二级联动效果
2017/03/09 Javascript
使用异步组件优化Vue应用程序的性能
2019/04/28 Javascript
vue+高德地图写地图选址组件的方法
2019/05/18 Javascript
Typescript的三种运行方式(小结)
2019/09/18 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
2019/12/10 Javascript
[07:54]DOTA2 MV《我的动力鞋》 ImbaTV 出品
2014/11/21 DOTA
python的pdb调试命令的命令整理及实例
2017/07/12 Python
Python视频爬虫实现下载头条视频功能示例
2018/05/07 Python
Python图片转换成矩阵,矩阵数据转换成图片的实例
2018/07/02 Python
使用50行Python代码从零开始实现一个AI平衡小游戏
2018/11/21 Python
Python树莓派学习笔记之UDP传输视频帧操作详解
2019/11/15 Python
10张动图学会python循环与递归问题
2021/02/06 Python
大三毕业自我鉴定
2014/01/15 职场文书
《世界多美呀》教学反思
2014/03/02 职场文书
2014矛盾纠纷排查调处工作总结
2014/12/09 职场文书
律师催款函范文
2015/06/24 职场文书