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 相关文章推荐
按Enter键触发事件的jquery方法实现代码
Feb 17 Javascript
javascript的变量、传值、传址、参数之间关系
Jul 26 Javascript
JavaScript程序设计之JS调试
Dec 09 Javascript
js本地图片预览实现代码
Oct 09 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
Oct 16 Javascript
原生JS实现图片轮播效果
Dec 26 Javascript
VUE长按事件需求详解
Oct 18 Javascript
JavaScript时间戳与时间日期间相互转换
Dec 11 Javascript
vue-devtools的安装步骤
Apr 23 Javascript
React Native基础入门之初步使用Flexbox布局
Jul 02 Javascript
实例分析vue循环列表动态数据的处理方法
Sep 28 Javascript
vue3弹出层V3Popup实例详解
Jan 04 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动态分页函数,PHP开发分页必备啦
2011/11/07 PHP
那些年一起学习的PHP(一)
2012/03/21 PHP
CI框架开发新浪微博登录接口源码完整版
2014/05/28 PHP
php中常见的sql攻击正则表达式汇总
2014/11/06 PHP
简单了解将WordPress中的工具栏移到底部的小技巧
2015/12/31 PHP
CI框架数据库查询之join用法分析
2016/05/18 PHP
PC端微信扫码支付成功之后自动跳转php版代码
2017/07/07 PHP
php压缩文件夹最新版
2018/07/18 PHP
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
2007/04/29 Javascript
走出JavaScript初学困境—js初学
2008/12/29 Javascript
调用js时ie6和ie7,ff的区别
2009/08/19 Javascript
JavaScript中两种链式调用实现代码
2011/01/12 Javascript
jquery ajax请求方式与提示用户正在处理请稍等
2014/09/01 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
2014/09/13 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
2015/12/04 Javascript
jquery 获取select数组与name数组长度的实现代码
2016/06/20 Javascript
jQuery.cookie.js使用方法及相关参数解释
2017/03/06 Javascript
vue 路由页面之间实现用手指进行滑动的方法
2018/02/23 Javascript
详解如何webpack使用DllPlugin
2018/09/30 Javascript
[01:45]绝对公平!DOTA2队长征召模式详解
2014/04/25 DOTA
5款非常棒的Python工具
2018/01/05 Python
python高阶爬虫实战分析
2018/07/29 Python
python lambda表达式在sort函数中的使用详解
2019/08/28 Python
python getpass模块用法及实例详解
2019/10/07 Python
python-docx文件定位读取过程(尝试替换)
2020/02/13 Python
python中的对数log函数表示及用法
2020/12/09 Python
解决pip安装tensorflow中出现的no module named tensorflow.python 问题方法
2021/02/20 Python
HTML5实现无刷新修改URL的方法
2019/11/14 HTML / CSS
岳父生日宴会答谢词
2014/01/13 职场文书
《和我们一样享受春天》教学反思
2014/02/07 职场文书
端午节活动策划方案
2014/03/09 职场文书
停车位租赁协议书
2014/09/24 职场文书
基层党员干部四风问题整改方向和措施
2014/09/25 职场文书
2014年学校财务工作总结
2014/12/06 职场文书
如何撰写出一份完美的商业计划书?
2019/07/12 职场文书
Win11电源已接通但未充电怎么办?Win11电源已接通未充电的解决方法
2022/04/05 数码科技