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传递变量: 值传递?引用传递?
Feb 22 Javascript
使用JSLint提高JS代码质量方法分享
Dec 16 Javascript
jQuery CSS()方法改变现有的CSS样式表
Sep 09 Javascript
JavaScript里四舍五入函数round用法实例
Apr 06 Javascript
js获取元素的外链样式的简单实现方法
Jun 06 Javascript
JavaScript字符串_动力节点Java学院整理
Jun 27 Javascript
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 jQuery
layui select动态添加option的实例
Mar 07 Javascript
Vue对象赋值视图不更新问题及解决方法
Jun 03 Javascript
在博客园博文中添加自定义右键菜单的方法详解
Feb 05 Javascript
vue-cli3中配置alias和打包加hash值操作
Sep 04 Javascript
分享一个vue实现的记事本功能案例
Apr 11 Vue.js
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中使用与Perl兼容的正则表达式
2006/11/26 PHP
PHP7创建COOKIE和销毁COOKIE的实例方法
2020/02/03 PHP
javascript编程起步(第五课)
2007/01/10 Javascript
JavaScript创建命名空间(namespace)的最简实现
2007/12/11 Javascript
避免 showModalDialog 弹出新窗体的原因分析
2010/05/31 Javascript
web性能优化之javascript性能调优
2012/12/28 Javascript
js 实现菜单左右滚动显示示例介绍
2013/11/21 Javascript
使用jQuery实现返回顶部
2015/01/26 Javascript
Java File类的常用方法总结
2015/03/18 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
2016/01/14 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
2016/06/13 Javascript
JavaScript继承与多继承实例分析
2018/05/26 Javascript
vue 实现边输入边搜索功能的实例讲解
2018/09/16 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
2019/04/12 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
2019/08/08 Javascript
vue实现二级导航栏效果
2019/10/19 Javascript
vue组件创建的三种方式小结
2020/02/03 Javascript
8种用Python实现线性回归的方法对比详解
2019/07/10 Python
Python编写通讯录通过数据库存储实现模糊查询功能
2019/07/18 Python
python使用百度文字识别功能方法详解
2019/07/23 Python
python随机生成库faker库api实例详解
2019/11/28 Python
详解Pycharm出现out of memory的终极解决方法
2020/03/03 Python
基于Python绘制个人足迹地图
2020/06/01 Python
Python Selenium模块安装使用教程详解
2020/07/09 Python
CSS3的Flexbox布局的简明入门指南
2016/04/08 HTML / CSS
Paradigit比利时电脑卖场:购买笔记本、电脑、平板和外围设备
2016/11/28 全球购物
中学生班主任评语
2014/01/30 职场文书
教师开学感言
2014/02/14 职场文书
五年后的职业生涯规划
2014/03/04 职场文书
提拔干部考察材料
2014/05/26 职场文书
社区健康教育工作方案
2014/06/03 职场文书
贸易经济专业自荐书
2014/06/29 职场文书
信用卡逾期证明示例
2014/09/13 职场文书
2014县委书记四风对照检查材料思想汇报
2014/09/21 职场文书
教师“一帮一”结对子活动总结
2015/05/07 职场文书
python实现批量移动文件
2021/04/05 Python