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 相关文章推荐
extjs 学习笔记(三) 最基本的grid
Oct 15 Javascript
查看源码的工具 学习jQuery源码不错的工具
Dec 26 Javascript
jquery 自定义容器下雨效果可将下雨图标改为其他
Apr 23 Javascript
js简单实现竖向tab选项卡的方法
May 04 Javascript
仅30行代码实现Javascript中的MVC
Feb 15 Javascript
JS简单循环遍历json数组的方法
Apr 22 Javascript
Bootstrap的基本应用要点浅析
Dec 19 Javascript
微信小程序 弹框和模态框实现代码
Mar 10 Javascript
javascript过滤数组重复元素的实现方法
May 03 Javascript
jQuery实现的简单歌词滚动功能示例
Jan 07 jQuery
layui动态绑定事件的方法
Sep 20 Javascript
jQuery实现广告显示和隐藏动画
Jul 04 jQuery
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常用函数汇总
2014/12/17 PHP
php自动更新版权信息显示的方法
2015/06/19 PHP
PHP ADODB实现分页功能简单示例
2018/05/25 PHP
Javascript实现的鼠标经过时播放声音
2010/05/18 Javascript
js 可拖动列表实现代码
2011/12/13 Javascript
jQuery读取和设定KindEditor值的方法
2013/11/22 Javascript
qq悬浮代码(兼容各个浏览器)
2014/01/29 Javascript
实例解析Array和String方法
2016/12/14 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
2017/02/21 Javascript
Angular中ng-options下拉数据默认值的设定方法
2017/06/21 Javascript
JavaScript实现跟随滚动缓冲运动广告框
2017/07/15 Javascript
nodejs 搭建简易服务器的图文教程(推荐)
2017/07/18 NodeJs
无限循环轮播图之运动框架(原生JS实现)
2017/10/01 Javascript
基于js文件加载优化(详解)
2018/01/03 Javascript
node.js基础知识小结
2018/02/26 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
2018/07/13 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
2018/08/27 Javascript
extract-text-webpack-plugin用法详解
2019/02/14 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
2019/04/24 Javascript
Element-UI中关于table表格的那些骚操作(小结)
2019/08/15 Javascript
[36:05]DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs Optic
2018/04/01 DOTA
Python实现判断给定列表是否有重复元素的方法
2018/04/11 Python
Python 列表去重去除空字符的例子
2019/07/20 Python
django基于restframework的CBV封装详解
2019/08/08 Python
python序列化与数据持久化实例详解
2019/12/20 Python
Python安装tar.gz格式文件方法详解
2020/01/19 Python
python实现人脸签到系统
2020/04/13 Python
Django使用rest_framework写出API
2020/05/21 Python
Pycharm如何自动生成头文件注释
2020/11/14 Python
使用Python通过oBIX协议访问Niagara数据的示例
2020/12/04 Python
html5+css如何实现中间大两头小的轮播效果
2018/12/06 HTML / CSS
美国摩托车头盔、零件、齿轮及配件商店:Cycle Gear
2019/06/12 全球购物
给同事的道歉信
2014/01/11 职场文书
房屋出售协议书
2014/04/10 职场文书
乡镇精神文明建设汇报材料
2014/08/15 职场文书
mapstruct的用法之qualifiedByName示例详解
2022/04/06 Java/Android