JQuery中parent(),parents(),parentsUntil()区别和使用技巧
parent()其实很简单, 就是指定选择器中每个元素的外边的一层。比如$("p"),那么就是结果就是包裹着<p></p>的数据 如:<div><p></p></div>。如果有多个<p>则结果集为对象集。可以用eq(i),first(),last()定位。如果数据为<ul><li><div><p>怎使用$("p").parent("li")查询的结果为空,因为<p>的外层为<div>。
JQuery手册中
<div><p>Hello</p></div><div class="selected"><p>Hello Again</p></div>
$("p").parent(".selected");
//结果:
[ <div class="selected"><p>Hello Again</p></div> ]
可以理解为
$("p").parent().find(".selected");
找直接父亲中类为selected的那一个或者几个。
所以parent()的实用性并不强。
parents()就是选择器中每个元素的所有的父亲,如果选择器有多个父亲则返回的是个结果集。结果集的结果是由内层向外层排列的。最外层就是整个html元素了,第一个就是紧包着选择器中每个元素的元素。结果集中并没有重复的元素。
同理当带参数时,也是在结果集中find制定的元素
$("p").parents(".selected");
$("p").parents().find(".selected");
因此我们想找到选择器的某个父亲,就要先找到他的所有父亲,然后在find这个父亲。
当我们想找到当前元素的某个父亲的时候,下面的语法就要用到了。
$(this).parents("li");
//$(this).parents().find("li");
所以parents()的实用性很强。非常常用。
parentsUntil(expr)。如果说parents()是在整个html元素中找选择器中每个元素的所有父亲,那么parentsUntil()的作用就是限制了查找的范围。这个范围就是 $(expr).html()
$("p").parents();//包含整个html 元素
$("p").parentsUntil("html");//不包含整个html元素
以上两个表达式的结果集只相差一个元素,就是整个html元素。
$("p").parents();//包含整个html 元素
$("p").parentsUntil();//包含整个html元素
当parentsUntil()不带参数时,他等同于parents();
parentsUntil(expr)的结果集中的结果同样是由内层向外层排列的。parentUntil(expr),会从第一个包裹着元素父元素开始向外逐层查找,直到遇到第一个与表达式(expr)相匹配的元素为止。
$("p").parentsUntil(expr);
相当于在$(expr)中由内之外的寻找$("p")中每个元素的所有父元素
为了更加精准的寻找到指定的元素,可以如下的使用。
$("p").parentsUntil("ul").find("li");
但以上做法不能找到ul>li,只能找到ul * li。因为paentsUntil()返回结果集中最大的父亲是ul>*而find是在ul>*的后代元素查找不包括ul>*的元素。所以如果用该方法查找ul>li是不可行的
可以使用以下代码查询全部ul下的li(第一行),最近的ul下的所有li(第二行)
$("p").parents("ul").find("li");
$("p").parents("ul").eq(0).find("li");
parentsUntil(expr),返回的结果集不包括expr本身,而后面如果使用find()又会在结果集后代元素中查询,所以查询得到的结果不是expr的子元素而是二代和二代以后的子元素。
鉴于parentsUntil的表现,一般不建议使用。
parnetsUntil()可用于找到某个模块下的某些元素。
当我们要具体对结果集中某个元素进行操作是,要记得使用eq(i),first(),last()等函数取值,不然操作的是整个结果集。
动态查找父节点
$(this).parent("li");//找到第一个包住$(this)的dom,如这个dom是li则返回他的对象,如果不是则返回空对象
$(this).parents().find("li");//同上。
$(this).parents("li").eq(0);//$(this)外第一个包裹他的li对象
$(this).parentsUntil("li");//$(this)外到第一个包裹他的li之内的所有的$(this)的父亲
$(this).parentsUntil("ul").find("li");//$(this)在ul之前的那个父亲之内(不包括该父亲)找所有的li;如果<ul><li><p><a onclick="f()">中a是this的话,那么相当于$("li").find("li");最后结果之空。
$(this).parents("li").sublings();//查找所在的li的所有同辈元素
$(this).parents("li");//找到所有$(this)的父亲,并在其中找出所有的li的对象,组成结果集。结果集中结果由内之外排列
与parent()对应的函数是children()
与parents()对应的函数是find()
JQuery中parent(),parents(),parentsUntil()区别和使用技巧相关推荐
- jQuery中 parent child 与 ance desc 的区别
jQuery中< parent > child >与< ance desc >的区别 (1)< ance desc > 使用$("ance desc ...
- jQuery中position()与offset()区别
转载自 jQuery中position()与offset()区别 position()获取相对于它最近的具有相对位置(position:relative或position:absolute)的父级元 ...
- jquery (js中window.onload与jquery中$(document.ready())的区别)
jquery 学习之一(js中window.onload与jquery中$(document.ready())的区别) 耳听为虚,眼见为实.通过下面的实例可查看两者的异同(注意:aa.jpg最好是一张 ...
- python中的parents函数 / jQuery中的parents() 方法
函数是在python代码中遇到的,但是查了下,说是jQurty中的一个方法(函数),就不求甚解了,一同记录下: parents()函数作用: 返回所有上级(祖先)目录列表,[上级目录, 上上级目录, ...
- parent(),parents(),closet()区别与详解
方法 例子 描述 parent() 获得集合中每个匹配元素的父级元素 $('.item-1').parent().css('background-color','red'); parent()方法从指 ...
- JQuery中click() 和onclick()区别
1.onclick是绑定事件,告诉浏览器在鼠标点击时候要做什么 2.click()方法的主要作用是触发调用click方法元素onclick事件. 3.当click()被点击时,首先执行的是对应元素的o ...
- jQuery中this与$(this)区别
起初以为this和$(this)就是一模子刻出来.但是我在阅读时,和coding时发现,总不是一回事. What is "this"? In many object-oriente ...
- jquery 中后代遍历之children、find区别
jquery 中children.find区别 首先看一段HTML代码,如下: 1 <table id="tb"> 2 <tr> 3 <td>0 ...
- Jquery的parent和closet方法
jQuery 遍历 - closest() 方法 <!DOCTYPE html> <html><head> <script type="text/j ...
最新文章
- 编译成功但链接失败的原因
- 学习MSCKF笔记——四元数基础
- 【一雪前耻!】两种方法判断大小端模式
- 卷的作用_悄悄告诉你蛋糕卷零失败的秘诀!
- Linux文件查询笔记
- c/c++面试试题(三)
- ZooKeeper学习-- Zookeeper简单介绍
- 使用iBATIS3.0完成增删改查
- vc访问远程mysql_利用vc远程连接mysql一例
- 纪录安装tensorflow的又一次的坑
- 想搞定大厂面试官?4面阿里拿到P7Offer通用流行框架大全
- Unity3D场景漫游以及碰撞防止反弹
- 运行MINGW时遇到缺少.dll
- RNA-seq——五、根据差异基因画火山图、在火山图上标记基因名
- 简单的Python爬虫刷访问量程序
- 微信自定义菜单和个性化菜单添加emoji表情(兼容ios和安卓,防止小方框)
- SUSE Linux配置xmanager5
- 网络爬虫学习软件篇-Python(一)下载安装(超详细教程,傻瓜式说明)
- Cygwin的简介以及使用方法
- PTA_7-2 数组元素的删除
热门文章
- “重庆IT5000公益培训计划”项目一期圆满结束
- Photoshop制作的海报修改~
- java弱智代码,Java 弱智猜数游戏
- 【读论文】点云智能研究进展与趋势(2019)
- mysql executequery返回值_使用executequery数据库
- 项目中如何鼓励团队成员
- 【3dsmax】20180904基础知识整理(3)
- ubuntu18.04使用wine5.1.0安装运行PDF编辑器
- 黑客入侵企业级认证服务器 获取明文密码
- 经典·韩乔生语录·(zz)