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 相关文章推荐
jquery复选框CHECKBOX全选、反选
Aug 30 Javascript
jQuery 选择器详解
Jan 19 Javascript
基于JavaScript实现TAB标签效果
Jan 12 Javascript
jQuery 遍历map()方法详解
Nov 04 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
Mar 08 Javascript
基于express中路由规则及获取请求参数的方法
Mar 12 Javascript
vue.js实现插入数值与表达式的方法分析
Jul 06 Javascript
如何使用less实现随机下雪动画详解
Jan 02 Javascript
vue slot与传参实例代码讲解
Apr 28 Javascript
weui上传多图片,压缩,base64编码的示例代码
Jun 22 Javascript
基于小程序请求接口wx.request封装的类axios请求
Jul 02 Javascript
5种方法告诉你如何使JavaScript 代码库更干净
Sep 15 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
PHPCMS的使用小结
2010/09/20 PHP
PHP防止跨域提交表单
2013/11/01 PHP
php中hashtable实现示例分享
2014/02/13 PHP
ThinkPHP使用UTFWry地址库进行IP定位实例
2014/04/01 PHP
PHP判断文章里是否有图片的简单方法
2014/07/26 PHP
Laravel 5框架学习之Eloquent 关系
2015/04/09 PHP
php中实现进程锁与多进程的方法
2016/09/18 PHP
PHP Trait代码复用类与多继承实现方法详解
2019/06/17 PHP
Laravel 使用查询构造器配合原生sql语句查询的例子
2019/10/12 PHP
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
2009/12/07 Javascript
判断iframe是否加载完成的完美方法
2010/01/07 Javascript
node.js正则表达式获取网页中所有链接的代码实例
2014/06/03 Javascript
js实现适合新闻类图片的轮播效果
2017/02/05 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
2017/09/02 Javascript
基于模板引擎Jade的应用(详解)
2017/12/12 Javascript
javascript数组去重方法总结(推荐)
2019/03/20 Javascript
8个有意思的JavaScript面试题
2019/07/30 Javascript
vue el-tree 默认展开第一个节点的实现代码
2020/05/15 Javascript
[02:08]什么藏在DOTA2 TI9“小紫本”里?斧王历险记告诉你!
2019/05/17 DOTA
Python基于pygame模块播放MP3的方法示例
2017/09/30 Python
如何在django中运行scrapy框架
2020/04/22 Python
CSS3结构性伪类选择器九种写法
2012/04/18 HTML / CSS
详解android与HTML混合开发总结
2018/06/06 HTML / CSS
英国PC组件和在线电脑商店:SCAN
2019/04/18 全球购物
请介绍一下WSDL的文档结构
2013/03/17 面试题
2013的个人自我评价
2013/12/26 职场文书
公司节能减排方案
2014/05/16 职场文书
优秀员工演讲稿
2014/05/19 职场文书
秋季运动会开幕词
2015/01/28 职场文书
全国爱牙日活动总结
2015/02/05 职场文书
感恩节寄语2015
2015/03/24 职场文书
2015年安置帮教工作总结
2015/05/22 职场文书
2019幼儿教师求职信(3篇)
2019/09/20 职场文书
Python数据类型最全知识总结
2021/05/31 Python
理解python中装饰器的作用
2021/07/21 Python
攻击最高的10只幽灵系神奇宝贝,坚盾剑怪排第一,第五最为可怕
2022/03/18 日漫