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刷新框架中的其他页面 &amp;&amp; JS刷新窗口方法汇总
Jul 08 Javascript
js判断选择时间不能小于当前时间的示例代码
Sep 24 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
May 02 Javascript
js验证上传图片的方法
May 12 Javascript
JavaScript检测鼠标移动方向的方法
May 22 Javascript
ajax如何实现页面局部跳转与结果返回
Aug 24 Javascript
深入解析Javascript闭包的功能及实现方法
Jul 10 Javascript
理解Angular的providers给Http添加默认headers
Jul 04 Javascript
如何将HTML字符转换为DOM节点并动态添加到文档中详解
Aug 19 Javascript
vue组件通信传值操作示例
Jan 08 Javascript
如何让微信小程序页面之间的通信不再变困难
Jun 03 Javascript
微信小程序换肤功能实现代码(思路详解)
Aug 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
PHP4和PHP5共存于一系统
2006/11/17 PHP
php 按指定元素值去除数组元素的实现方法
2011/11/04 PHP
PHP简单实现数字分页功能示例
2016/08/24 PHP
Thinkphp 框架扩展之类库扩展操作详解
2020/04/23 PHP
JavaScript 数组的 uniq 方法
2008/01/23 Javascript
jQuery 隔行换色 支持键盘上下键,按Enter选定值
2009/08/02 Javascript
js实现两点之间画线的方法
2015/05/12 Javascript
javascript中for/in循环及使用技巧
2015/09/01 Javascript
jquery自定义表格样式
2015/11/23 Javascript
Node.js操作Firebird数据库教程
2016/03/04 Javascript
使用Promise链式调用解决多个异步回调的问题
2017/01/15 Javascript
基于JSONP原理解析(推荐)
2017/12/04 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
2018/09/11 Javascript
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
2018/11/14 Javascript
JS随机密码生成算法
2019/09/23 Javascript
vue 使用外部JS与调用原生API操作示例
2019/12/02 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
2020/02/14 Javascript
vue 获取url里参数的两种方法小结
2020/11/12 Javascript
一则python3的简单爬虫代码
2014/05/26 Python
零基础写python爬虫之抓取百度贴吧代码分享
2014/11/06 Python
python实现媒体播放器功能
2018/02/11 Python
Python cookbook(字符串与文本)在字符串的开头或结尾处进行文本匹配操作
2018/04/20 Python
python3调用百度翻译API实现实时翻译
2018/08/16 Python
Python面向对象程序设计OOP深入分析【构造函数,组合类,工具类等】
2019/01/05 Python
纯css3实现走马灯效果
2014/12/26 HTML / CSS
小学教师的个人自我鉴定
2013/10/26 职场文书
测绘工程专业个人自我评价
2013/12/01 职场文书
上课说话检讨书大全
2014/01/22 职场文书
大学毕业感言50字
2014/02/07 职场文书
洗发露广告词
2014/03/14 职场文书
艾滋病宣传标语
2014/06/25 职场文书
安全目标责任书
2014/07/22 职场文书
"9.18"国耻日演讲稿范文
2014/09/14 职场文书
青年联谊会致辞
2015/07/31 职场文书
Python基础之pandas数据合并
2021/04/27 Python
MySQL笔记 —SQL运算符
2022/01/18 MySQL