closest() 方法

一.方法含义

返回第一个祖先元素

二.案例代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试closest</title>
<style>
.ancestors *{ display: block;border: 2px solid lightgrey;color: lightgrey;padding: 5px;margin: 15px;
}
</style>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(function(){$("span").closest("ul").css({"color":"red","border":"2px solid red"});$("span").closest("ul").find("li").eq(1).find("span").eq(0).css({"color":"green","border":"2px solid green"});
});
</script>
</head><body class="ancestors">body (曾曾祖先节点)<div style="width:500px;">div (曾祖先节点)<ul>ul (第二祖先 - 第二祖先节点) <ul>ul (第一祖先 - 第一祖先节点)<li>li (直接父节点)<span>span01</span></li><li><span>span02</span><span>span03</span></li></ul></ul>   </div>
</body><!-- 在这个例子中, $("span").closest("ul") 指我们查找一个span元素的第一个ul祖先。最靠近span的祖先是li,但是由于查到一个div，jQuery 跳过li元素继续查找下一个祖先，直到它找出我们要查找的ul.假如我们用parents() 方法替代，它将返回ul的祖先 。 -->
</html>

三.效果图

closest() 方法相关推荐

jquery .parents(), .parent() 和 closest()方法
2019独角兽企业重金招聘Python工程师标准>>> parent是找当前元素的第一个父节点,parents是找当前元素的所有父节点 parent().parents()与clos ...
jQuery 遍历 - closest() 方法
jQuery 遍历参考手册实例本例演示如何通过 closest() 完成事件委托.当被最接近的列表元素或其子后代元素被点击时,会切换黄色背景: $( document ).bind("c ...
jQuery遍历之closest()方法
以选定的元素为中心,往内查找可以通过find.children方法.如果往上查找,也就是查找当前元素的父辈祖辈元素,jQuery提供了closest()方法,这个方法类似parents但是又有一些细微 ...
jquery的closest方法和parents方法的区别
今天第一次看到closest方法,以前也从来没用过. 该方法从元素本身开始往上查找,返回最近的匹配的祖先元素. 1.closest查找开始于自身,parents开始于元素父级 2.closest向上查 ...
jquery学习之-查找父元素方法parent() parents() closest()的区别
parent().parents()与closest()方法两两之间有类似又有不同,本篇简短的区分一下这三个方法.通过本篇内容,大家将会在以后使用.parent().parents()和closest ...
jquery 常用方法 delegate() siblings() closest() indexOf() substring()
siblings() 获得匹配集合中每个元素的同胞,通过选择器进行筛选是可选的. closest() 方法获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上. //删除行 functio ...
jQuery选择器和选取方法 http://www.cnblogs.com/MaxIE/p/4078869.html
我们已经使用了带有简单Css选择器的jQuery选取函数:$().现在是时候深入了解jQuery选择器语法,以及一些提取和扩充选中元素集的方法了. 一.jQuery选择器在CSS3选择器标淮草案定义 ...
遍历同辈节电的方法_JQuery遍历DOM节点的方法
本文实例讲述了JQuery遍历DOM节点的方法.分享给大家供大家参考.具体分析如下: 本节的核心是介绍JQuery的DOM操作,前面介绍了很多创建.删除.替换等等节点操作.这里介绍如何遍历节点,选中临 ...
jQuery选择器和选取方法
我们已经使用了带有简单Css选择器的jQuery选取函数:$().现在是时候深入了解jQuery选择器语法,以及一些提取和扩充选中元素集的方法了. 一.jQuery选择器在CSS3选择器标淮草案定义 ...
jQ选择器与常用的方法归纳
1.jQuery入口函数与JS入口函数的区别(理解) JS入口函数指的是:window.onload = function() {}; jQ入口函数指的是:`$`(function(){}); 区别一 ...

closest() 方法

closest() 方法相关推荐

最新文章

热门文章