jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
closest() 方法获得匹配选择器的第一个祖先元素，从当前元素开始沿 DOM 树向上。
语法：
.closest(selector)
参数selector为字符串值，包含匹配元素的选择器表达式。
如果给定表示 DOM 元素集合的 jQuery 对象，.closest() 方法允许我们检索 DOM 树中的这些元素以及它们的祖先元素，并用匹配元素构造新的 jQuery 对象。.parents() 和 .closest() 方法类似，它们都沿 DOM 树向上遍历。两者之间的差异尽管微妙，却很重要：
| .closest() | .parents() |
| 从当前元素开始 | 从父元素开始 |
| 沿 DOM 树向上遍历，直到找到已应用选择器的一个匹配为止。 | 沿 DOM 树向上遍历，直到文档的根元素为止，将每个祖先元素添加到一个临时的集合；如果应用了选择器，则会基于该选择器对这个集合进行筛选。 |
| 返回包含零个或一个元素的 jQuery 对象 | 返回包含零个、一个或多个元素的 jQuery 对象 |
先看下面的示例：演示如何通过 closest() 完成事件委托。当被最接近的列表元素或其子后代元素被点击时，会切换黄色背景
代码如下:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<style>
li { margin: 3px; padding: 3px; background: #EEEEEE; }
li.hilight { background: yellow; }
</style>
</head>
<body>
<ul>
<li><b>Click me!</b></li>
<li>You can also <b>Click me!</b></li>
</ul>
<script>
$( document ).bind("click", function( e ) {
$( e.target ).closest("li").toggleClass("hilight");
});
</script>
</body>
</html>
1、当鼠标点击“You can also”时，颜色出现变化。这是因为closest是从当前元素开始向上遍历的。而不同于parents()方法，是从当前元素的父元素开始向上遍历。
2、当点击Click me!时，颜色也会变化。这同样经过上面步骤，从当前元素向上匹配，只不过<b>不符合条件，再往上时遇见了<li>。
3、实例演示请访问：http://www.w3school.com.cn/tiy/t.asp?f=jquery_traversing_closest
<ul id="one" class="level-1">
<li class="item-i">I</li>
<li id="ii" class="item-ii">II
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
$('li.item-a').closest('ul').css('background-color', 'red');
结果：
这会改变 level-2 <ul> 的颜色，这是因为当向上遍历 DOM 树时会第一个遇到该元素。
如下图所示：
假设我们搜索的是 <li> 元素
$('li.item-a').closest('li').css('background-color', 'red');
这会改变列表项目 A 的颜色。在向上遍历 DOM 树之前，.closest() 方法会从 li 元素本身开始搜索，直到选择器匹配项目 A 为止。
例子 3
我们可以传递 DOM 元素作为 context（即限定搜索的最大范围），在其中搜索最接近的元素。
代码如下:
var listItemII = document.getElementById('ii');
$('li.item-a').closest('ul', listItemII).css('background-color', 'red');
$('li.item-a').closest('#one', listItemII).css('background-color', 'green');
以上代码会改变 level-2 <ul> 的颜色，因为它既是列表项 A 的第一个 <ul> 祖先，同时也是列表项 II 的后代。
它不会改变 level-1 <ul> 的颜色，因为它不是 list item II 的后代。
相关推荐
-
JQuery.closest(),parent(),parents()寻找父结点
HTML代码,测试地址:jQuery 遍历 - closest() 方法 ------我粘代码上来,在页面上会自动隐藏(会显示一下)!谁能教我这是肿么回事! 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(通过选择器查找父元素) 复制代码 代码如下: $('
-
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
在这个sprint中,因为要写前端UI,所以用到了jQuery,但是jQuery在向上遍历DOM树的API中,有parents(). parent().closest()这几个,一直不太清楚它们具体的区别,所以狠下心好好读了一下jQuery的API文档,并把区别记在这里,以供参考. 1.parents([selector]) 本方法用于选择给定jQuery对象中包含的DOM元素或者DOM元素集的祖先节点,并将这些节点包装成jQuery对象返回,返回的节点集是以从里到外的顺序排序的. 同时,本方
-
jQuery中closest和parents的区别分析
jQuery中closest和parents从表现上来看都是说查找上线元素的一些内容了,但如果说仔细可能各位不懂,下面我们一起来看看closest和parents区别. 1.父级 parent()--唯一父级元素,可能是0个或1个元素. 2.祖先 parents(selected)--所有selected祖先(不包含根元素),可能是0个.1个或多个元素. closest(selected)--唯一selected祖先,可能是0个或1个元素. closest和parents的主要区别是: 前者从当
-
jquery中的查找parents与closest方法之间的区别
一.返回值 前者可以返回多个元素 或者只能返回0个或者1个 二.停止的时间不同 前者是所有的上级元素即一直到根一般是body 后者是知道发现为止,发现一个就停止了 三.开始的元素不同 前者是从父元素开始 后者是从自身开始的 代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tra
-
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
closest() 方法获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上. 语法: .closest(selector) 参数selector为字符串值,包含匹配元素的选择器表达式. 如果给定表示 DOM 元素集合的 jQuery 对象,.closest() 方法允许我们检索 DOM 树中的这些元素以及它们的祖先元素,并用匹配元素构造新的 jQuery 对象..parents() 和 .closest() 方法类似,它们都沿 DOM 树向上遍历.两者之间的差异尽管微妙,却很重要:
-
Jquery遍历select option和添加移除option的实现方法
如下所示: function changeShipMethod(shipping){ var len = $("select[name=ISHIPTYPE] option").length if(shipping.value != "CA"){ $("select[name=ISHIPTYPE] option").each(function(){ if($(this).val() == 111){ $(this).remove(); } });
-
jquery 追加元素append、prepend、before、after用法与区别分析
一.after()和before()方法的区别 after()--其方法是将方法里面的参数添加到jquery对象后面去: 如:A.after(B)的意思是将B放到A后面去: before()--其方法是将方法里面的参数添加到jquery对象前面去. 如:A.before(B)的意思是将A放到B前面去: 二.insertAfter()和insertBefore()的方法的区别 其实是将元素对调位置: 可以是页面上已有元素:也可以是动态添加进来的元素.
-
jQuery遍历节点元素方法介绍
一.遍历子元素 children()方法可以用来获取元素的所有子元素,语法如下: 示例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <me
-
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
nextUntil() 获得每个元素所有跟随的同胞元素,当有参数时,则直到遇到该方法的参数所匹配的元素时会停止搜索.返回的新 jQuery 对象包含所有跟随的同胞元素,但不包括被选择器.DOM 节点或已传递的 jQuery 对象匹配的元素.如果没有参数,则会选取所有跟随的同胞元素,此时与.nextAll()方法相同. 语法一: 复制代码 代码如下: .nextUntil(selector,filter) 语法二: 复制代码 代码如下: .nextUntil(element,filter) 详细说
-
JQuery遍历DOM节点的方法
本文实例讲述了JQuery遍历DOM节点的方法.分享给大家供大家参考.具体分析如下: 本节的核心是介绍JQuery的DOM操作,前面介绍了很多创建.删除.替换等等节点操作.这里介绍如何遍历节点,选中临近节点等的一些方法. children()方法 该方法用于取得匹配元素的子元素集合.根据DOM树的结构,可以知道各个元素之间的关系以及它们子节点的个数. 下面使用children()方法来获取匹配元素的所有子元素的个数. var $body = $("body").children();
-
JQuery遍历json数组的3种方法
一.使用each遍历 复制代码 代码如下: $(function () { var tbody = ""; //------------遍历对象 .each的使用------------- //对象语法JSON数据格式(当服务器端回调回来的对象数据格式是json数据格式,必须保证JSON的格式要求,回调的对象必须使用eval函数进行转化(否则将得不到Object).本文不作详细介绍服务器端回调的数据问题,我们将直接自定义对象)
-
jQuery遍历DOM元素与节点方法详解
本文实例讲述了jQuery遍历DOM元素与节点方法.分享给大家供大家参考,具体如下: 一.向上遍历--祖先元素 ① $(selector).parent([filter]):返回selector匹配元素的直接父元素,方法可以接受一个过滤selector来过滤返回的父元素. ② $(selector).parents([filter]):返回匹配元素的所有祖先节点,一直向上直到文档根元素html,方法可以接受一个过滤selector来过滤返回的祖先节点. 备注:parent与parents的区别,
-
jQuery遍历节点方法汇总(推荐)
1.children()方法:$('div').children()---遍历查找div元素的所有子元素节点 <p>Hello</p> <div> <span>Hello Again</span> <p class="box">您好!</p> </div> <p>And Again</p> <script type="text/javascript&q
-
jQuery遍历节点树方法分析
本文实例讲述了jQuery遍历节点树方法.分享给大家供大家参考,具体如下: demo.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="js/jquery-1.10.1.min.js" type=&