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实现倒计时并弹窗提示特效
Jun 05 Javascript
在 Express 中使用模板引擎
Dec 10 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
Jan 26 Javascript
盘点javascript 正则表达式中 中括号的【坑】
Mar 16 Javascript
JS动态改变浏览器标题的方法
Apr 06 Javascript
JavaScript实战(原生range和自定义特效)简单实例
Aug 21 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
Feb 13 Javascript
jquery图片放大镜效果
Jun 23 jQuery
详解javascript常用工具类的封装
Jan 30 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
Sep 11 Javascript
微信小程序实现上传多个文件 超过10个
Mar 30 Javascript
详解 TypeScript 枚举类型
Nov 02 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和ACCESS写聊天室(六)
2006/10/09 PHP
PHP 采集获取指定网址的内容
2010/01/05 PHP
用PHP写的基于Memcache的Queue实现代码
2011/11/27 PHP
PHP Class&amp;Object -- PHP 自排序二叉树的深入解析
2013/06/25 PHP
php禁止浏览器使用缓存页面的方法
2014/11/07 PHP
php类中的$this,static,final,const,self这几个关键字使用方法
2015/12/14 PHP
PHP模糊查询的实现方法(推荐)
2016/09/06 PHP
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
2010/03/07 Javascript
js写的方法实现上传图片之后查看大图
2014/03/05 Javascript
JavaScript 匿名函数和闭包介绍
2015/04/13 Javascript
jfinal与bootstrap的登录跳转实战演习
2015/09/22 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
2016/05/17 Javascript
Select2.js下拉框使用小结
2016/10/24 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
2016/12/15 Javascript
微信小程序 标签传入数据
2017/05/08 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
2018/03/27 Javascript
puppeteer库入门初探
2019/01/09 Javascript
JS事件流与事件处理程序实例分析
2019/08/16 Javascript
[14:51]DOTA2 HEROS教学视频教你分分钟做大人-卓尔游侠
2014/06/13 DOTA
Windows下安装python MySQLdb遇到的问题及解决方法
2017/03/16 Python
python抓取京东小米8手机配置信息
2018/11/13 Python
对sklearn的使用之数据集的拆分与训练详解(python3.6)
2018/12/14 Python
初探利用Python进行图文识别(OCR)
2019/02/26 Python
伦敦哈德森鞋:Hudson Shoes
2018/02/06 全球购物
台湾东南旅游社网站:东南旅游
2019/02/11 全球购物
人事专员岗位职责范本
2014/03/04 职场文书
九华山导游词
2015/02/03 职场文书
税务会计岗位职责
2015/04/02 职场文书
爱国主义教育基地观后感
2015/06/18 职场文书
中秋节随笔
2015/08/15 职场文书
python opencv人脸识别考勤系统的完整源码
2021/04/26 Python
pytorch Dropout过拟合的操作
2021/05/27 Python
使用Redis实现点赞取消点赞的详细代码
2022/03/20 Redis
Python学习之时间包使用教程详解
2022/03/21 Python
mysql使用 not int 子查询隐含陷阱
2022/04/12 MySQL
Python实现聚类K-means算法详解
2022/07/15 Python