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 相关文章推荐
JS IE和FF兼容性问题汇总
Feb 09 Javascript
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
Jan 23 Javascript
IE6下opacity与JQuery的奇妙结合
Mar 01 Javascript
javascript 实现键盘上下左右功能的小例子
Sep 15 Javascript
jquery创建表格(自动增加表格)代码分享
Dec 25 Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
Jun 05 Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
Jan 10 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
Apr 20 Javascript
微信小程序实现皮肤功能(夜间模式)
Jun 18 Javascript
JavaScript实现的九种排序算法
Mar 04 Javascript
layui使用表格渲染获取行数据的例子
Sep 13 Javascript
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
Sep 25 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读取csv数据保存到数组的方法
2015/01/03 PHP
php使用递归函数实现数字累加的方法
2015/03/16 PHP
php面向对象编程self和static的区别
2016/05/08 PHP
PHP函数rtrim()使用中的怪异现象分析
2017/02/24 PHP
js动态添加事件并可传参数示例代码
2013/10/21 Javascript
利用jq让你的div居中的好方法分享
2013/11/21 Javascript
Dojo获取下拉框的文本和值实例代码
2016/05/27 Javascript
jquery获取form表单input元素值的简单实例
2016/05/30 Javascript
js实现短信发送倒计时功能(正则验证)
2017/02/10 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
2017/03/13 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
2018/10/19 Javascript
vue路由中前进后退的一些事儿
2019/05/18 Javascript
layui的select联动实现代码
2019/09/28 Javascript
用JS实现选项卡
2020/03/23 Javascript
python3.0 字典key排序
2008/12/24 Python
Python 时间操作例子和时间格式化参数小结
2014/04/24 Python
Python守护进程(daemon)代码实例
2015/03/06 Python
在Python中操作字典之clear()方法的使用
2015/05/21 Python
Python中eval带来的潜在风险代码分析
2017/12/11 Python
用python绘制樱花树
2020/10/09 Python
Python学习工具jupyter notebook安装及用法解析
2020/10/23 Python
Python读取pdf表格写入excel的方法
2021/01/22 Python
HTML5 placeholder属性详解
2016/06/22 HTML / CSS
C++:memset ,memcpy和strcpy的根本区别
2013/04/27 面试题
软件测试工程师结构化面试题库
2016/11/23 面试题
学校经典推荐信
2013/10/30 职场文书
司机职责范本
2014/03/08 职场文书
新闻专业毕业生英文求职信
2014/03/19 职场文书
2014领导班子四风问题对照检查材料思想汇报
2014/09/21 职场文书
辞职信如何写
2015/02/27 职场文书
个人简历求职信范文
2015/03/20 职场文书
停课通知书
2015/04/24 职场文书
环境卫生标语
2015/08/03 职场文书
决心书格式范文
2015/09/23 职场文书
数据库的高级查询六:表连接查询:外连接(左外连接,右外连接,UNION关键字,连接中ON与WHERE的不同)
2021/04/05 MySQL
JS轻量级函数式编程实现XDM三
2022/06/16 Javascript