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 相关文章推荐
给页面渲染时间加速 干掉Dom Level 0 Event
Dec 19 Javascript
JavaScript匿名函数与委托使用示例
Jul 22 Javascript
一个JavaScript用逗号分割字符串实例
Sep 22 Javascript
jQuery学习笔记之基础中的基础
Jan 19 Javascript
JavaScript实现SHA-1加密算法的方法
Mar 11 Javascript
jQuery实现平滑滚动到指定锚点的方法
Mar 20 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
Sep 28 Javascript
引入JavaScript时alert弹出框显示中文乱码问题
Sep 16 Javascript
对vue里函数的调用顺序介绍
Mar 17 Javascript
详解ES6 Fetch API HTTP请求实用指南
Nov 14 Javascript
微信小程序日历/日期选择插件使用方法详解
Dec 28 Javascript
配置eslint规范项目代码风格
Mar 11 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
Terran兵种介绍
2020/03/14 星际争霸
在PHP的图形函数中显示汉字
2006/10/09 PHP
php页码形式分页函数支持静态化地址及ajax分页
2014/03/28 PHP
Thinkphp5.0框架视图view的模板布局用法分析
2019/10/12 PHP
Mootools 1.2教程 定时器和哈希简介
2009/09/15 Javascript
根据鼠标的位置动态的控制层的位置
2009/11/24 Javascript
超级酷和最实用的jQuery实例收集(20个)
2010/04/21 Javascript
兼容IE和FF的js脚本代码小结(比较常用)
2010/12/06 Javascript
JavaScript高级程序设计 读书笔记之十 本地对象Date日期
2012/02/27 Javascript
一些常用弹出窗口/拖放/异步文件上传等实用代码
2013/01/06 Javascript
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
2013/06/27 Javascript
jquery操作cookie插件分享
2014/01/14 Javascript
JavaScript中判断变量是数组、函数或是对象类型的方法
2015/02/25 Javascript
javascript实现数独解法
2015/03/14 Javascript
封装好的javascript前端分页插件pagination
2016/01/04 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
2016/12/02 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
2017/03/09 Javascript
JavaScript 完成注册页面表单校验的实例
2017/08/19 Javascript
nodejs 最新版安装npm 的使用详解
2018/01/18 NodeJs
浅谈React高阶组件
2018/03/28 Javascript
python避免死锁方法实例分析
2015/06/04 Python
python实现感知器算法详解
2017/12/19 Python
python之DataFrame实现excel合并单元格
2021/02/22 Python
python写入文件自动换行问题的方法
2019/07/05 Python
python 判断三个数字中的最大值实例代码
2019/07/24 Python
PyQt5+Caffe+Opencv搭建人脸识别登录界面
2019/08/28 Python
python根据时间获取周数代码实例
2019/09/30 Python
简单了解为什么python函数后有多个括号
2019/12/19 Python
keras 回调函数Callbacks 断点ModelCheckpoint教程
2020/06/18 Python
Python如何解除一个装饰器
2020/08/07 Python
利用三角函数在canvas上画虚线的方法
2018/01/11 HTML / CSS
经济实惠的豪华家具:My-Furniture
2019/03/12 全球购物
2014公司年终工作总结
2014/12/19 职场文书
导游词欢迎词
2015/02/02 职场文书
2015中秋节慰问信范文
2015/03/23 职场文书
安装Windows Server 2012 R2企业版操作系统并设置好相关参数
2022/04/29 Servers