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 相关文章推荐
javascript学习笔记(二) js一些基本概念
Jun 18 Javascript
Jquery实现图片放大镜效果的思路及代码(自写)
Oct 18 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
Jun 22 Javascript
深入理解jquery中extend的实现
Dec 22 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
Jan 20 Javascript
jQuery获取Table某列的值(推荐)
Mar 03 Javascript
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
javascript 日期相减-在线教程(附代码)
Aug 17 Javascript
JS 实现获取验证码 倒计时功能
Oct 29 Javascript
微信小程序ibeacon三点定位详解
Oct 31 Javascript
js如何获取访问IP、地区、当前操作浏览器
Jul 23 Javascript
angular异步验证防抖踩坑实录
Dec 01 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中preg_replace_callback函数简单用法示例
2016/07/21 PHP
JS实现点击下载的小例子
2013/07/10 Javascript
去掉gridPanel表头全选框的小例子
2013/07/18 Javascript
js设置function参数默认值(适合没有传参情况)
2014/02/24 Javascript
JavaScript中的函数声明和函数表达式区别浅析
2015/03/27 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
2015/04/06 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
2015/10/26 Javascript
使用Vue开发一个实时性时间转换指令
2018/01/17 Javascript
vue.js系列中的vue-fontawesome使用
2018/02/10 Javascript
MVVM 双向绑定的实现代码
2018/06/21 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
2018/08/25 Javascript
JavaScript实现页面中录音功能的方法
2019/06/04 Javascript
100行代码实现vue表单校验功能(小白自编)
2019/11/19 Javascript
记录微信小程序 height: calc(xx - xx);无效问题
2019/12/30 Javascript
javascript中正则表达式语法详解
2020/08/07 Javascript
原生JS实现音乐播放器的示例代码
2021/02/25 Javascript
[43:41]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
python使用心得之获得github代码库列表
2014/06/25 Python
Python中的默认参数详解
2015/06/24 Python
Python3字符串学习教程
2015/08/20 Python
用Python解决计数原理问题的方法
2016/08/04 Python
浅谈pandas用groupby后对层级索引levels的处理方法
2018/11/06 Python
对python内置map和six.moves.map的区别详解
2018/12/19 Python
pytz格式化北京时间多出6分钟问题的解决方法
2019/06/21 Python
pytorch 彩色图像转灰度图像实例
2020/01/13 Python
python实现简单坦克大战
2020/03/27 Python
Python高阶函数与装饰器函数的深入讲解
2020/11/10 Python
matplotlib交互式数据光标实现(mplcursors)
2021/01/13 Python
image-set实现Retina屏幕下图片显示详细介绍
2012/12/24 HTML / CSS
毕业自我鉴定
2013/11/05 职场文书
函授大学生自我鉴定
2014/02/05 职场文书
中学生旷课检讨书2篇
2014/10/09 职场文书
2015年第十五个全民国防教育日宣传活动方案
2015/05/06 职场文书
外出考察学习心得体会
2016/01/18 职场文书
2019旅游导游工作总结
2019/06/27 职场文书
Zabbix对Kafka topic积压数据监控的解决方案
2022/07/07 Servers