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中查找最近的共有祖先元素的实现代码
Dec 30 Javascript
用Jquery实现滚动新闻
Feb 12 Javascript
JavaScript实现广告弹窗效果
Aug 09 Javascript
用js写的一个路由(简单实例)
Sep 24 Javascript
js oncontextmenu事件使用详解
Mar 25 Javascript
关于Bootstrap按钮组件消除黄框的方法
May 19 Javascript
zTree树形插件异步加载方法详解
Jun 14 Javascript
vue的mixins属性详解
Mar 14 Javascript
微信小程序获取用户openid的实现
Dec 24 Javascript
vue递归组件实战之简单树形控件实例代码
Aug 27 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
Apr 01 Javascript
在vue-cli3中使用axios获取本地json操作
Jul 30 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语法小结之基础和变量
2015/11/22 PHP
两种php实现图片上传的方法
2016/01/22 PHP
PHP读MYSQL中文乱码的快速解决方法
2016/10/01 PHP
PHP使用curl_multi_select解决curl_multi网页假死问题的方法
2018/08/15 PHP
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
2009/06/04 Javascript
jquery实现鼠标拖动图片效果示例代码
2014/01/09 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
2014/01/14 Javascript
js获取当前地址 JS获取当前URL的示例代码
2014/02/26 Javascript
JavaScript操作HTML元素和样式的方法详解
2015/10/21 Javascript
jQuery validate插件实现ajax验证重复的2种方法
2016/01/22 Javascript
jquery form表单获取内容以及绑定数据
2016/02/24 Javascript
Angular.JS学习之依赖注入$injector详析
2016/10/20 Javascript
ES6中Generator与异步操作实例分析
2017/03/31 Javascript
微信小程序实现给循环列表添加点击样式实例
2017/04/26 Javascript
AngularJS自定义指令实现面包屑功能完整实例
2017/05/17 Javascript
Nodejs回调加超时限制两种实现方法
2017/06/09 NodeJs
vue-router 起步步骤详解
2019/03/26 Javascript
详解nvm管理多版本node踩坑
2019/07/26 Javascript
微信小程序实现按字母排列选择城市功能
2019/11/25 Javascript
Vue数字输入框组件示例代码详解
2020/01/15 Javascript
Node使用Nodemailer发送邮件的方法实现
2020/02/24 Javascript
解决vue scoped html样式无效的问题
2020/10/24 Javascript
[03:05]《我与DAC》之xiao8:DAC与BG
2018/03/27 DOTA
用Python设计一个经典小游戏
2017/05/15 Python
pyCharm 设置调试输出窗口中文显示方式(字符码转换)
2020/06/09 Python
python3环境搭建过程(利用Anaconda+pycharm)完整版
2020/08/19 Python
荷兰超市:DEEN
2018/03/14 全球购物
River Island美国官网:英国高街时尚品牌
2018/09/04 全球购物
丝芙兰加拿大官方网站:SEPHORA加拿大
2018/11/20 全球购物
歌颂祖国演讲稿
2014/05/04 职场文书
公司户外活动总结
2014/07/04 职场文书
春游踏青活动方案
2014/08/14 职场文书
物业客服专员岗位职责
2015/04/07 职场文书
文化大革命观后感
2015/06/17 职场文书
银行中层干部培训心得体会
2016/01/11 职场文书
Mybatis-plus在项目中的简单应用
2021/07/01 Java/Android