jQuery_parent() parents() closest()区别

  parent 是找当前元素的第一个父节点,不管匹不匹配都不继续往下找

  parents 是找当前元素的所有父节点 

  closest 是找当前元素的所有父节点 ,直到找到第一个匹配的父节点

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 7 <title>Insert title here</title>
 8 <script type="text/javascript"
 9     src="${pageContext.request.contextPath}/resource/js/jquery-1.8.2.min.js"></script>
10 </head>
11 <body>
12
13     <ul id="menu" style="width: 100px;">
14         <li>
15             <ul>
16                 <li><a href="#">Home</a></li>
17             </ul>
18         </li>
19         <li>End</li>
20     </ul>
21
22 </body>
23
24 <script type="text/javascript">
25     //点击Home时
26     $("#menu a").click(function() {
27         $(this).parent("ul").css("background", "yellow");
28         alert($(this).parent("ul").length)        //0
29
30         $(this).parent("li").parent("ul").css("background", "yellow");
31         alert($(this).parent("li").length)        //1
32
33         $(this).parents("ul").css("background", "yellow");
34         alert($(this).parents("ul").length)        //2
35
36         $(this).closest("ul").css("background", "yellow");
37         alert($(this).closest("ul").length)        //1
38     });
39 </script>
40 </html>

1.parent()方法从指定类型的直接父节点开始查找,在"0"中,<a>的直接父节点是<li>所以在这里找不到<ul>父节点。在"2"中先找到了<li>,接着找到<ul>,并将它的背景色设置为yellow。parent()返回一个节点。

2.parents()方法查找方式同parent()方法类似,不同的一点在于,当它找到第一的父节点时并没有停止查找,而是继续查找,最后返回多个父节点,如在"2"中,使得id为menu的ul整个背景色变成了yellow。

3.closest()方法查找时从包含自身的节点找起,它同parents()很类似,不同点就在于它只返回一个节点如在"3"中,实现的功能同1相同。但它使得代码量减小,同"2"相比又只返回单一的一个节点。可见,closest()方法在项目中的使用频率是比较大的。

原文地址:https://www.cnblogs.com/rocker-pg/p/8966348.html

时间: 2024-10-12 09:30:06

jQuery_parent() parents() closest()区别的相关文章

jquery parent() parents() closest()区别

parent是找当前元素的第一个父节点,不管匹不匹配都不继续往下找 parents是找当前元素的所有父节点  closest() 是找当前元素的所有父节点 ,直到找到第一个匹配的父节点 parent().parents()与closest()方法两两之间有类似又有不同,本篇简短的区分一下这三个方法.通过本篇内容,大家将会在以后使用.parent().parents()和closest()时不会显得无从下手. 我们直接看例子来来说明一下这三个方法的使用区别: 1 <ul id="menu&q

jQuery中的closest()和parents()的区别

jQuery中的closest()和parents()的区别 jQuery中closest()和parents()的作用非常相似,都是向上寻找符合选择器条件的元素,但是他们之间有一些细微的差别,官网也给出了说明: .closest() .parents() Begins with the current element Begins with the parent element Travels up the DOM tree until it finds a match for the sup

closest和parents方法区别

今天第一次看到closest方法,以前也从来没用过. 该方法从元素本身开始往上查找,返回最近的匹配的祖先元素. 1.closest查找开始于自身,parents开始于元素父级 2.closest向上查找,知道找到一个匹配就停止查找,parents一直查找到根元素,并将匹配的元素加入集合 3.closest返回的是包含零个或一个元素的jquery对象,parents返回的是包含零个或一个或多个元素的jquery对象

#array_parents #parents的区别

https://www.drupal.org/node/279246 #array_parents  => 一定会反映表单的物理结构 就是该是哪个下面就是哪个下面 不来虚的#parents  =>  反映其在$form_state['values']下面的结构,和这个值互相影响. 具体看变量打印工具出来的结果

jquery parent和parents的区别分析

https://zhidao.baidu.com/question/2011675347812958428.html ------------------------------------------------------------------关于 parent和parents 的参数------------------------------------------------------------ 经常用法// $(this).parent().parent(); var val =

Zepto API 学习

1: $.inArray $.inArray('2', [3, '2', 10]) 1 $.inArray('2', [3, '22', 10]) -1 Get the position of element inside an array 2: $.map $.map([2,3,8], function(item, index){ if(item > 2)return item; }) 3: children find parent parents closest 区别 children 找的

jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别

http://www.poluoluo.com/jzxy/201312/253059.html 在这个sprint中,因为要写前端UI,所以用到了jQuery,但是jQuery在向上遍历DOM树的API中,有parents(). parent().closest()这几个,一直不太清楚它们具体的区别,所以狠下心好好读了一下jQuery的API文档,并把区别记在这里,以供参考.  1.parents([selector]) 本方法用于选择给定jQuery对象中包含的DOM元素或者DOM元素集的祖先

jQuery查找——parent/parents/parentsUntil/closest

jquery的parent(),parents(),parentsUntil(),closest()都是向上查找父级元素,具体用法不同 parent():取得一个包含着所有匹配元素的唯一父元素的元素集合. parents():沿 DOM 树向上遍历,直到文档的根元素(<html>)为止,将每个祖先元素添加到一个临时的集合:如果应用了选择器,则会基于该选择器对这个集合进行筛选.返回零个.一个或多个元素. closest():沿 DOM 树向上遍历,直到找到已应用选择器的一个匹配为止.返回零个或一

JQuery包装集size,length,index,slice,find,filter,is,children,next,nextAll,parent,parents,closest,siblings,add,end,andSelf的用法

在使用Jquery包装集的知识之前首先要注意三个概念(当前包装集.新包装集.包装集内部元素)的区别. 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <