jQuery中closest()函数用法实例


Posted in Javascript onJanuary 07, 2015

本文实例讲述了jQuery中closest()函数用法。分享给大家供大家参考。具体分析如下:

此函数从元素本身开始,逐级向上级元素匹配,并返回最先匹配的元素。
closest()函数会首先检查当前元素是否匹配,如果匹配则直接返回元素本身。如果不匹配则向上查找父元素,一层一层往上,直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象。

语法结构一:

$(selector).closest(expr, context)

参数列表:

参数 描述
expr 用以过滤元素的表达式
context 可选。作为待查找的 DOM 元素集或者文档。

实例代码:

实例一:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>closest()函数-三水点靠木</title>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $(".father p").closest("div").css("color","green");

})

</script>

</head>

<body>

<div class="father">

  <div class="children"> 我是div

    <p>我是孙子p</p>

  </div>

  <p>我是儿子p</p>

</div>

<p>我是兄弟p</p>

</body>

</html>

实例二:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>closest()函数-三水点靠木</title>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("#children p").closest("#father",document.getElementById("children")).

  css("border","1px solid red");

})

</script>

</head>

<body>

<div id="father">

  <div id="children">

    <p>我是孙子p</p>

  </div>

  <p>我是儿子p</p>

</div>

<p>我是兄弟p</p>

</body>

</html>

由于id为father的div并没有在id为children的div之内,所以并不能将其边框设置为红色。

语法结构二:

$(selector).closest(element)

参数列表:

参数 描述
element 用于匹配元素的DOM元素或者jQuery元素。

实例代码:

实例一:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>closest()函数-三水点靠木</title>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("#children p").closest(document.getElementById("children")).

  css("border","1px solid red");

})

</script>

</head>

<body>

<div id="father">

  <div id="children">

    <p>我是孙子p</p>

  </div>

  <p>我是儿子p</p>

</div>

<p>我是兄弟p</p>

</body>

</html>

实例二:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>closest()函数-三水点靠木</title>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("#children p").closest($("#children")).css("border","1px solid red");

})

</script>

</head>

<body>

<div id="father">

  <div id="children">

    <p>我是孙子p</p>

  </div>

  <p>我是儿子p</p>

</div>

<p>我是兄弟p</p>

</body>

</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
excel操作之Add Data to a Spreadsheet Cell
Jun 12 Javascript
jQuery 学习 几种常用方法
Jun 11 Javascript
JavaScript 密码强度判断代码
Sep 05 Javascript
浅谈javascript六种数据类型以及特殊注意点
Dec 20 Javascript
jquery实现的下拉和收缩效果示例
Aug 21 Javascript
js实现select跳转功能代码
Oct 22 Javascript
JavaScript使用addEventListener添加事件监听用法实例
Jun 01 Javascript
jQuery实现form表单元素序列化为json对象的方法
Dec 09 Javascript
Bootstrap 布局组件(全)
Jul 18 Javascript
AngularJs IE Compatibility 兼容老版本IE
Sep 01 Javascript
js eval函数使用,js对象和字符串互转实例
Mar 06 Javascript
Node.js 路由的实现方法
Jun 05 Javascript
javascript实现全角与半角字符的转换
Jan 07 #Javascript
自己封装的常用javascript函数分享
Jan 07 #Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
Jan 07 #Javascript
Angular用来控制元素的展示与否的原生指令介绍
Jan 07 #Javascript
jQuery中children()方法用法实例
Jan 07 #Javascript
angular.element方法汇总
Jan 07 #Javascript
jQuery中slice()方法用法实例
Jan 07 #Javascript
You might like
咖啡知识大全
2021/03/03 新手入门
php 301转向实现代码
2008/09/18 PHP
PHP实现显示照片exif信息的方法
2014/07/11 PHP
Yii2使用表单上传文件的实例代码
2017/08/03 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
js option删除代码集合
2008/11/12 Javascript
javascript实现跳转菜单的具体方法
2013/07/05 Javascript
Javascript核心读书有感之类型、值和变量
2015/02/11 Javascript
jQuery简单动画变换效果实例分析
2016/07/04 Javascript
js原生代码实现轮播图的实例讲解
2017/07/28 Javascript
angular6 填坑之sdk的方法
2018/12/27 Javascript
vue.js实现的幻灯片功能示例
2019/01/18 Javascript
谈谈IntersectionObserver懒加载的具体使用
2019/10/15 Javascript
[01:33]真香警告!DOTA2勇士令状不朽珍藏Ⅱ饰品欣赏
2018/06/26 DOTA
在python3环境下的Django中使用MySQL数据库的实例
2017/08/29 Python
python的变量与赋值详细分析
2017/11/08 Python
python爬取足球直播吧五大联赛积分榜
2018/06/13 Python
解决python selenium3启动不了firefox的问题
2018/10/13 Python
Python3.5实现的三级菜单功能示例
2019/03/25 Python
使用Python实现文字转语音并生成wav文件的例子
2019/08/08 Python
django3.02模板中的超链接配置实例代码
2020/02/04 Python
python 递归调用返回None的问题及解决方法
2020/03/16 Python
Python datetime模块的使用示例
2021/02/02 Python
利用CSS3的transition属性实现滑动效果
2015/08/05 HTML / CSS
C#基础面试题
2016/10/17 面试题
Ejb技术面试题
2015/04/29 面试题
办公室助理岗位职责
2013/12/25 职场文书
自主实习接收函
2014/01/13 职场文书
2014年世界艾滋病日宣传活动总结
2014/11/18 职场文书
营业用房租赁协议书
2014/11/26 职场文书
本科毕业论文指导教师评语
2014/12/30 职场文书
2015年财务部工作总结
2015/04/10 职场文书
2015年司法所工作总结
2015/04/27 职场文书
升学宴祝酒词
2015/08/11 职场文书
React Fragment介绍与使用详解
2021/11/11 Javascript