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 相关文章推荐
Notify - 基于jquery的消息通知插件
Oct 18 Javascript
精心挑选的15个jQuery下拉菜单制作教程
Jun 15 Javascript
网站繁简切换的JS遇到页面卡死的解决方法
Mar 12 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
Mar 24 Javascript
如何利用AngularJS打造一款简单Web应用
Dec 05 Javascript
微信小程序 图片加载(本地,网路)实例详解
Mar 10 Javascript
React应用中使用Bootstrap的方法
Aug 15 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
Sep 21 Javascript
clipboard在vue中的使用的方法示例
Oct 19 Javascript
JS算法题之查找数字在数组中的索引位置
May 15 Javascript
JS中实现一个下载进度条及播放进度条的代码
Jun 10 Javascript
如何将JavaScript将数组转为树形结构
Jun 02 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
业余方法DIY电子管FM收音机
2021/03/02 无线电
咖啡风味 世界咖啡主要分布分布 咖啡的生长要求
2021/03/06 新手入门
PHP 强制下载文件代码
2010/10/24 PHP
PHP 图片上传代码
2011/09/13 PHP
PHP书写格式详解(必看)
2016/05/23 PHP
php数据库操作model类(使用__call方法)
2016/11/16 PHP
javascript 数组的方法集合
2008/06/05 Javascript
用Javascript评估用户输入密码的强度实现代码
2011/11/30 Javascript
JavaScript中的property和attribute介绍
2011/12/26 Javascript
js播放wav文件(源码)
2013/04/22 Javascript
NodeJS与Mysql的交互示例代码
2013/08/18 NodeJs
html文件中jquery与velocity变量中的$冲突的解决方法
2013/11/01 Javascript
javascript绘制漂亮的心型线效果完整实例
2016/02/02 Javascript
简单理解Vue条件渲染
2016/12/03 Javascript
jQuery实现页面倒计时并刷新效果
2017/03/13 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
2018/09/26 Javascript
详解项目升级到vue-cli3的正确姿势
2019/01/28 Javascript
Vue+Express实现登录注销功能的实例代码
2019/05/05 Javascript
微信小程序定义和调用全局变量globalData的实现
2019/11/01 Javascript
[01:02:45]完美世界DOTA2联赛 LBZS vs Forest 第三场 11.07
2020/11/09 DOTA
python八大排序算法速度实例对比
2017/12/06 Python
学习Django知识点分享
2019/09/11 Python
基于python操作ES实例详解
2019/11/16 Python
Python类中self参数用法详解
2020/02/13 Python
windows+vscode安装paddleOCR运行环境的步骤
2020/11/11 Python
python中delattr删除对象方法的代码分析
2020/12/15 Python
sklearn中的交叉验证的实现(Cross-Validation)
2021/02/22 Python
css3 border旋转时的动画应用
2016/01/22 HTML / CSS
英国网上购买门:Direct Doors
2018/06/07 全球购物
Android interview questions
2016/12/25 面试题
材料物理专业个人求职信
2013/12/15 职场文书
合作意向协议书
2015/01/29 职场文书
2015年学校禁毒工作总结
2015/05/27 职场文书
企业安全隐患排查治理制度
2015/08/05 职场文书
2016年“5.12”国际护士节活动总结
2016/04/06 职场文书
Windows server 2003卸载和安装IIS的图文教程
2022/07/15 Servers