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检查日期格式的函数[比较全]
Oct 17 Javascript
JavaScript的document对象和window对象详解
Dec 30 Javascript
密码强度检测效果实现原理与代码
Jan 04 Javascript
Javascript控制页面链接在新窗口打开具体方法
Aug 16 Javascript
基于jQuery实现二级下拉菜单效果
Feb 01 Javascript
Javascript基础知识盲点总结之函数
May 15 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
Aug 08 Javascript
JavaScript职责链模式概述
Sep 17 Javascript
js操作二进制数据方法
Mar 03 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
Aug 13 Javascript
Vue.js点击切换按钮改变内容的实例讲解
Aug 22 Javascript
pageGroup.js实现分页功能
Jul 27 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错误提示failed to open stream: HTTP request failed!的完美解决方法
2011/06/06 PHP
做了CDN获取用户真实IP的函数代码(PHP与Asp设置方式)
2013/04/13 PHP
php禁用函数设置及查看方法详解
2016/07/25 PHP
PHP使用PDO访问oracle数据库的步骤详解
2017/09/29 PHP
实现checkbox全选、反选、取消JavaScript小脚本异常
2014/04/10 Javascript
jQuery的context属性用法实例
2014/12/27 Javascript
javascript实现自动输出文本(打字特效)
2015/08/27 Javascript
JavaScript如何动态创建table表格
2020/08/02 Javascript
AngularJS数据源的多种获取方式汇总
2016/02/02 Javascript
浅析JS动态创建元素【两种方法】
2016/04/20 Javascript
JavaScript中的操作符类型转换示例总结
2016/05/30 Javascript
js从输入框读取内容,比较两个数字的大小方法
2017/03/13 Javascript
echart简介_动力节点Java学院整理
2017/08/11 Javascript
React应用中使用Bootstrap的方法
2017/08/15 Javascript
nodejs+express搭建多人聊天室步骤
2018/02/12 NodeJs
解决vue组件中click事件失效的问题
2019/11/09 Javascript
vue实现图片按比例缩放问题操作
2020/08/11 Javascript
JS+css3实现幻灯片轮播图
2020/08/14 Javascript
详解vue中使用transition和animation的实例代码
2020/12/12 Vue.js
Python实现列表删除重复元素的三种常用方法分析
2017/11/24 Python
python 与服务器的共享文件夹交互方法
2018/12/27 Python
解决PySide+Python子线程更新UI线程的问题
2019/01/11 Python
基于MATLAB和Python实现MFCC特征参数提取
2019/08/13 Python
python下载卫星云图合成gif的方法示例
2020/02/18 Python
Django实现列表页商品数据返回教程
2020/04/03 Python
PyTorch的torch.cat用法
2020/06/28 Python
python mongo 向数据中的数组类型新增数据操作
2020/12/05 Python
荷兰包包购物网站:The Little Green Bag
2018/03/17 全球购物
经贸日语毕业生自荐信
2013/11/03 职场文书
销售行政专员职责
2014/01/03 职场文书
社会学专业求职信
2014/02/24 职场文书
工会趣味活动方案
2014/08/18 职场文书
大学社团招新的通讯稿
2014/09/10 职场文书
全家福照片寄语怎么写?
2019/04/02 职场文书
争做文明公民倡议书
2019/06/24 职场文书
68行Python代码实现带难度升级的贪吃蛇
2022/01/18 Python